Skip to content

Instantly share code, notes, and snippets.

@TaylorAckley

TaylorAckley/form.html

Last active Oct 19, 2015
Embed
What would you like to do?
Sexy Input Styling with CSS
<form class="myForm">
<input type="input" id="name">
</form>
.myForm input[type="text"] {
display: block;
margin: 2px;
padding: 5px;
width: 100%;
font-family: 'Lora';
font-size: 18px;
border: 2px solid white;
border-radius: 10px;
background: transparent;
color: white;
box-sizing: border-box;
}
.myForm input[type="datetime-local"] {
display: block;
margin: 2px;
padding: 5px;
width: 100%;
font-family: 'Lora';
font-size: 18px;
border: 2px solid white;
border-radius: 10px;
background: transparent;
color: white;
box-sizing: border-box;
}
::-webkit-input-placeholder {
color: #e74c3c;
}
:-moz-placeholder { /* Firefox 18- */
color: #e74c3c;
}
::-moz-placeholder { /* Firefox 19+ */
color: #e74c3c;
}
:-ms-input-placeholder {
color: #e74c3c;
}
input[type="text"] {
display: block;
margin: 2px;
padding: 5px;
width: 100%;
font-family: 'Lora';
font-size: 18px;
border: 2px solid white;
border-radius: 10px;
background: transparent;
color: white;
box-sizing: border-box;
}
input[type="datetime-local"] {
display: block;
margin: 2px;
padding: 5px;
width: 100%;
font-family: 'Lora';
font-size: 18px;
border: 2px solid white;
border-radius: 10px;
background: transparent;
color: white;
box-sizing: border-box;
}
::-webkit-input-placeholder {
color: #e74c3c;
}
:-moz-placeholder { /* Firefox 18- */
color: #e74c3c;
}
::-moz-placeholder { /* Firefox 19+ */
color: #e74c3c;
}
:-ms-input-placeholder {
color: #e74c3c;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment