Preview and Create CSS3 boxes with shadows, rounded corners, gradients, text shadows, and more all without using a single image. It's about freaking time!!!
This site will let you edit the CSS directly on the page (without using an element inspector).
Pretty cool...
Because the world isn't a perfect place, that's why.
If you're coding a nice clean form and you want your <select> tags and your <input type="text"> tags all to be the same width, you would think that:
input[type=text],
select {
border: solid 1px #c2c1c1;
width: 150px;
padding: 2px;
}
...would do the trick.
But no, <select> Renders differently (and it always has, remember that old z-indexing issue in old IE browsers?). It turns out that when you set the width of a <select>, that is the width it gets.
When you set the width of the <input type="text"> (and any other element), it gets that width + any padding you set + the border width. <select>doesn't roll that way
So after you set the above styles, you then need to set a special width for :
select {
width: 156px;
//needs to be input[type=text] width + [2×(border and padding)] }
A PITA, but that's like in the UXDEV world...
