Is it possible to stylize the down arrow on a drop down select element? i.e., (<select><option>--></option></select>)
I suspect the answer is no because of the way IE handles that particular element. If there isn't a way, does anyone know of a 'fake' drop down box using javaScript that would mimic that behavior but give me the ability to customize?
Maybe you can use jQuery selectbox replacement. It's a jQuery plugin.
No, the down arrow is a browser element. It's built in [and different] in every browser. You can, however, replace the select box with a custom drop down box using javascript.
Jan Hancic mentioned a jQuery plugin to do just that.
The drop-down is platform-level element, you can't apply CSS to it.
You can overlay an image on top of it using CSS, and call the click event in the element beneath.
This will change inputs, select etc to the old style grey not sure if you can manipulate after that:
In <head> put:
<meta http-equiv="MSThemeCompatible" content="NO">
You can't style combos very well using CSS.
The guys at FogBugz made a pretty good custom combo using JavaScript, so it is possible, it just takes a lot of work to get it right.
Better to stick with the standard one for version 1, then see if it's worth updating it once your app is in the wild.
I don't know if it is stylable with CSS (probably not in IE), but please: do not use a "fake" drop-down box using javascript, because the usability of these things usually is horrible. Among other things, keyboard navigation is usually absent.
The drop-down is platform-level element, you can't apply CSS to it.
You can overlay an image on top of it using CSS, and call the click event in the element beneath.
http://jsfiddle.net/u3cybk2q/2/ check on windows, iOS and Android (iexplorer patch)
.styled-select select {_x000D_
background: transparent;_x000D_
width: 240px;_x000D_
padding: 5px;_x000D_
font-size: 16px;_x000D_
line-height: 1;_x000D_
border: 0;_x000D_
border-radius: 0;_x000D_
height: 34px;_x000D_
-webkit-appearance: none;_x000D_
}_x000D_
.styled-select {_x000D_
width: 240px;_x000D_
height: 34px;_x000D_
overflow: visible;_x000D_
background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;_x000D_
border: 1px solid #ccc;_x000D_
}_x000D_
.styled-select select::-ms-expand {_x000D_
display: none; /*patch iexplorer*/_x000D_
} <div class="styled-select">_x000D_
<select>_x000D_
<option>Here is the first option</option>_x000D_
<option>The second option</option>_x000D_
</select>_x000D_
</div>You would need to create your own dropdown using hidden divs and a hidden input element to record which option was "selected". My guess is that @Jan Hancic's link he posted is probably what you're looking for.
No, the down arrow is a browser element. It's built in [and different] in every browser. You can, however, replace the select box with a custom drop down box using javascript.
Jan Hancic mentioned a jQuery plugin to do just that.
There's a cool CSS-only solution to styling dropdowns here: http://bavotasan.com/2011/style-select-box-using-only-css/
Basically, wrap the select in a container div, style the select to be 18px wider than the container with a transparent background, give overflow:hidden to the container (to chop off the browser-generated arrow), and add your background image with stylized arrow to the container.
Doesn't work in IE7 (or 6), but seriously, I say if you're using IE7 you deserve a less-pretty dropdown experience.
You can achieve this with just CSS and your down arrow as an image positioned absolute with a "pointer-events: none;" see my example below:
<select>
<option value="1">1 Person</option>
<option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />
.passthrough {
pointer-events: none;
position: absolute;
right: 0;
}
http://jsfiddle.net/u3cybk2q/2/ check on windows, iOS and Android (iexplorer patch)
.styled-select select {_x000D_
background: transparent;_x000D_
width: 240px;_x000D_
padding: 5px;_x000D_
font-size: 16px;_x000D_
line-height: 1;_x000D_
border: 0;_x000D_
border-radius: 0;_x000D_
height: 34px;_x000D_
-webkit-appearance: none;_x000D_
}_x000D_
.styled-select {_x000D_
width: 240px;_x000D_
height: 34px;_x000D_
overflow: visible;_x000D_
background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;_x000D_
border: 1px solid #ccc;_x000D_
}_x000D_
.styled-select select::-ms-expand {_x000D_
display: none; /*patch iexplorer*/_x000D_
} <div class="styled-select">_x000D_
<select>_x000D_
<option>Here is the first option</option>_x000D_
<option>The second option</option>_x000D_
</select>_x000D_
</div>You can't style combos very well using CSS.
The guys at FogBugz made a pretty good custom combo using JavaScript, so it is possible, it just takes a lot of work to get it right.
Better to stick with the standard one for version 1, then see if it's worth updating it once your app is in the wild.
I don't know if it is stylable with CSS (probably not in IE), but please: do not use a "fake" drop-down box using javascript, because the usability of these things usually is horrible. Among other things, keyboard navigation is usually absent.
You would need to create your own dropdown using hidden divs and a hidden input element to record which option was "selected". My guess is that @Jan Hancic's link he posted is probably what you're looking for.
Try this
<div style='position:relative;left:0px;top:0px;
onMouseOver=document.getElementById('visible').style.visibility='visible'
id='hidden'>10
<select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
onMouseOut=document.getElementById('visible').style.visibility='hidden'
onChange='this.form.submit()'
id='visible' multiple size='3'>";
<option selected value=10>10</option>
<option value=20>20</option>
<option value=50>50</option>
</select>
</div>
There's a cool CSS-only solution to styling dropdowns here: http://bavotasan.com/2011/style-select-box-using-only-css/
Basically, wrap the select in a container div, style the select to be 18px wider than the container with a transparent background, give overflow:hidden to the container (to chop off the browser-generated arrow), and add your background image with stylized arrow to the container.
Doesn't work in IE7 (or 6), but seriously, I say if you're using IE7 you deserve a less-pretty dropdown experience.
The drop-down is platform-level element, you can't apply CSS to it.
You can overlay an image on top of it using CSS, and call the click event in the element beneath.
No, the down arrow is a browser element. It's built in [and different] in every browser. You can, however, replace the select box with a custom drop down box using javascript.
Jan Hancic mentioned a jQuery plugin to do just that.
You can achieve this with just CSS and your down arrow as an image positioned absolute with a "pointer-events: none;" see my example below:
<select>
<option value="1">1 Person</option>
<option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />
.passthrough {
pointer-events: none;
position: absolute;
right: 0;
}
Try this
<div style='position:relative;left:0px;top:0px;
onMouseOver=document.getElementById('visible').style.visibility='visible'
id='hidden'>10
<select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
onMouseOut=document.getElementById('visible').style.visibility='hidden'
onChange='this.form.submit()'
id='visible' multiple size='3'>";
<option selected value=10>10</option>
<option value=20>20</option>
<option value=50>50</option>
</select>
</div>
This will change inputs, select etc to the old style grey not sure if you can manipulate after that:
In <head> put:
<meta http-equiv="MSThemeCompatible" content="NO">
I don't know if it is stylable with CSS (probably not in IE), but please: do not use a "fake" drop-down box using javascript, because the usability of these things usually is horrible. Among other things, keyboard navigation is usually absent.
You would need to create your own dropdown using hidden divs and a hidden input element to record which option was "selected". My guess is that @Jan Hancic's link he posted is probably what you're looking for.
You can't style combos very well using CSS.
The guys at FogBugz made a pretty good custom combo using JavaScript, so it is possible, it just takes a lot of work to get it right.
Better to stick with the standard one for version 1, then see if it's worth updating it once your app is in the wild.
Source: Stackoverflow.com