Recently, I had a project where I wanted a fresh look to all my input forms, making them appear as single gray lines like you would find on a pen-and-paper form.
Here is the initial set up for the project:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html> | |
<body> | |
<input type="text" name="dndName" id="dndName" class="flat" tabindex=1 /> | |
<select name="dndClasses" id="dndClasses" class="flat styledSelect" tabindex=2> | |
<option value="cleric">Cleric</a> | |
<option value="fighter">Fighter</a> | |
<option value="thief">Thief</a> | |
<option value="wizard">Wizard</a> | |
</select> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.flat | |
{ | |
border: 2px solid white; | |
border-bottom: 2px solid #ccc; | |
font-size: 12px; | |
padding: 4px 7px -5px 0; | |
margin:2px 0 2px 0; | |
outline: 0; | |
width:150px; | |
} |
Chrome |
IE |
Firefox |
In chrome, this is a simple matter of adding one line to our flat class: -webkit-appearance: none
This line will tell any webkit browser to ignore the default styling they usually apply to controls and instead use the one I've defined. For selects, this has the effect of completely removing the dropdown arrow, leaving me with exactly what I want:
Chrome with -webkit-appearance:none |
However, this does not address IE and Firefox, neither of which are webkit. Unfortunately, there is no way to simply style away the down arrow in these two browsers. So, what now? This is where things get annoying. In a perfect world, there would be a selector for all browsers such as chrome has, but because there is not, you might as well not even use it in chrome, since this hack for Firefox and IE will do the trick in chrome as well.
First we need to alter the markup.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html> | |
<body> | |
<input type="text" name="dndName" id="dndName" class="flat" tabindex=1 /> | |
<span class="styledSelectCont"> | |
<select name="dndClasses" id="dndClasses" class="flat styledSelect" tabindex=2> | |
<option value="cleric">Cleric</a> | |
<option value="fighter">Fighter</a> | |
<option value="thief">Thief</a> | |
<option value="wizard">Wizard</a> | |
</select> | |
</span> | |
</body> | |
</html> |
...and the css...
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.flat | |
{ | |
border: 2px solid white; | |
border-bottom: 2px solid #ccc; | |
font-size: 12px; | |
padding: 4px 0 -5px 0; | |
margin:0; | |
outline: 0; | |
width:150px; | |
} | |
.styledSelect | |
{ | |
display: inline-block; | |
width: 185px; | |
height: 28px;/*use height to hide top border under parent container boundaries for ie7*/ | |
background: transparent; | |
border: none; /*removes border in all browsers except ie7*/ | |
margin:-2px 0 0 -4px; | |
padding:2px 0 5px 0; | |
} | |
.styledSelectCont | |
{ | |
display: inline-block; | |
width: 151px; | |
height:15px; | |
overflow: hidden; | |
border: 2px solid white; | |
border-bottom: 2px solid #ccc; | |
} |
The select itself needs to go inside of a span. This span will have overflow:hidden, and a width smaller than the width of the select. This means the the down arrow is still technically there, but is running off the right edge of the span and is thus invisible to the user. We will also set the container span's height to something smaller than the height of the select, so that the top border of the select is now invisible. This is because IE7 is a pain in the butt and likes to ignore "border: none" on select objects.
Manipulating the padding and margins around a bit, and adjusting width as needed, gives us a way to have consistent select of any style or, in my case, a boring gray line that I think looks awesome.
The last three lines are dropdowns! Gregor the Bold, rides again! kye yah! |
Final Code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html> | |
<head> | |
<style type="text/css"> | |
.flat | |
{ | |
border: 2px solid white; | |
border-bottom: 2px solid #ccc; | |
font-size: 12px; | |
padding: 4px 0 -5px 0; | |
margin:0; | |
outline: 0; | |
width:150px; | |
} | |
.styledSelect | |
{ | |
display: inline-block; | |
width: 185px; | |
height: 28px;/*use height to hide top border under parent container boundaries for ie7*/ | |
background: transparent; | |
border: none; /*removes border in all browsers except ie7*/ | |
margin:-2px 0 0 -4px; | |
padding:2px 0 5px 0; | |
} | |
.styledSelectCont | |
{ | |
display: inline-block; | |
width: 151px; | |
height:15px; | |
overflow: hidden; | |
border: 2px solid white; | |
border-bottom: 2px solid #ccc; | |
} | |
</style> | |
</head> | |
<body> | |
<input type="text" name="dndName" id="dndName" class="flat" tabindex=1 /> | |
<span class="styledSelectCont"> | |
<select name="dndClasses" id="dndClasses" class="flat styledSelect" tabindex=2> | |
<option value="cleric">Cleric</a> | |
<option value="fighter">Fighter</a> | |
<option value="thief">Thief</a> | |
<option value="wizard">Wizard</a> | |
</select> | |
</span> | |
</body> | |
</html> |
No comments:
Post a Comment