- This topic is empty.
-
AuthorPosts
-
May 10, 2016 at 3:11 am #241433grimskiParticipant
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?
May 10, 2016 at 3:33 am #241435Paulie_DMemberTo be honest, if I’m going to that much trouble to overwrite the browsers default useragent styling I’m more likely to replace the element entirely and use javascript to manage it.
May 11, 2016 at 1:20 am #241485grimskiParticipantIt’s more just that declaring styles for
input {}
affects checkbox and radio inputs as well as textfields. Not a massive deal but I guess it’s a pain to need to overwrite everything again. Unfortunately the support for:not
isn’t good enough for what I need to still support.Might be best to just list all the text input types like I have done above for now, not that I use most of them!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.