At some point in time, every web developer is going to get bored with creating the same old contact form over and over for every website he works on. That's why in today's tutorial I'm going to show you how to create a natural language form using only HTML 5 and CSS 3. It only has a few fields, meant to demonstrate concept, but you can extend it if you want.
Natural Language Forms in web design are replacements for the classical forms we all know. With this approach sentences are constructed by user input forming a block of text that actually has meaning when read by a human being - close enough to "fill in the blanks" quizzes that you used to solve in school.
Going back to the code, I will not go through each CSS rule I've written because most of them are self-explanatory. Below are the ones that are a little tricky:
::-webkit-input-placeholder { /* WebKit browsers */
color: #B5E655;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #B5E655;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #B5E655;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #B5E655;
}
select.dropdown {
font-size: 1em;
color: #B5E655;
border: none;
border-bottom: 1px dashed #EFEFEF;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
width: auto;
text-indent: 0.01px;
text-overflow: "";
box-shadow: none;
font: inherit;
}
select.dropdown:focus {
outline: none;
border-bottom: 1px dashed #DD0000;
}