I don’t mean how to style them but I was wondering what peoples thoughts were on the CSS ‘mark-up’.
I generally use 320andup and my base, which goes something like this:
input,
textarea,
select {
background-color: $inputbackground;
box-shadow: inset 3px 3px 0 $grey-lighter;
border: $inputborderwidth $inputborderstyle $inputborder;
color: $textcolor;
display: inline-block;
margin-bottom: $baselineheight/4;
padding: 10px;
transition: border-color .25s;
width: 100%;
&:hover {
border-color: $inputhover;
}
}
It’s nice and tidy but it’s a bit of a pain to have to overwrite any styling for checkboxes and radio buttons.
An alternative I’ve used is specifying all the different (text) inputs like this:
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {}
It’s a bit heavy and it looks awful – but it does the trick and only targets/styles text input/textarea’s which the styling is meant for. I guess another method would be to use a class on inputs.
What are peoples thoughts?
