Is it possible to change the border color on a <select/> element in an HTML form?
The border-color style works in Firefox but not IE.
I could find no real answers on Google.
This question is related to
html
css
html-select
I would consinder enclosing that select block within a div block and setting the border property like this:
<div style="border: 2px solid blue;">_x000D_
<select style="width: 100%;">_x000D_
<option value="Sal">Sal</option>_x000D_
<option value="Awesome">Awesome!</option>_x000D_
</select>_x000D_
</div>You should be able to play with that to accomplish what you need.
select{
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,color=#FF0000);
}
Works for me.
No, the <select> control is a system-level control, not a client-level control in IE. A few versions back it didn't even play nicely-with z-index, putting itself on top of virtually everything.
To do anything fancy you'll have to emulate the functionality using CSS and your own elements.
<style>
.form-error {
border: 2px solid #e74c3c;
}
</style>
<div class="form-error">
{!! Form::select('color', $colors->prepend('Please Select Color', ''), ,['class' => 'form-control dropselect form-error'
,'tabindex' => $count++, 'id' => 'color']) !!}
</div>
Replacing the border-color with outline-color should work.
You can set the border color in IE however there are some issues.
Argh... I could have sworn you could do this... just tested and realized I wasn't correct. The notes below still apply though.
in IE8 (Beta1 -> RC1) changing the border color or the background color/image causes a de-theming of the control in WindowsXP (the drop arrow and box look like Windows 95)
you still can't style the options within the select control very well because IE doesn't support it. (see bug #291)
No, the <select> control is a system-level control, not a client-level control in IE. A few versions back it didn't even play nicely-with z-index, putting itself on top of virtually everything.
To do anything fancy you'll have to emulate the functionality using CSS and your own elements.
You can set the border color in IE however there are some issues.
Argh... I could have sworn you could do this... just tested and realized I wasn't correct. The notes below still apply though.
in IE8 (Beta1 -> RC1) changing the border color or the background color/image causes a de-theming of the control in WindowsXP (the drop arrow and box look like Windows 95)
you still can't style the options within the select control very well because IE doesn't support it. (see bug #291)
<style>
.form-error {
border: 2px solid #e74c3c;
}
</style>
<div class="form-error">
{!! Form::select('color', $colors->prepend('Please Select Color', ''), ,['class' => 'form-control dropselect form-error'
,'tabindex' => $count++, 'id' => 'color']) !!}
</div>
You can set the border color in IE however there are some issues.
Argh... I could have sworn you could do this... just tested and realized I wasn't correct. The notes below still apply though.
in IE8 (Beta1 -> RC1) changing the border color or the background color/image causes a de-theming of the control in WindowsXP (the drop arrow and box look like Windows 95)
you still can't style the options within the select control very well because IE doesn't support it. (see bug #291)
As Diodeus stated, IE doesn't allow anything but the default border for <select> elements. However, I know of two hacks to achieve a similar effect :
Use a DIV that is placed absolutely at the same position as the dropdown and set it's borders. It will appear that the dropdown has a border.
Use a Javascript solution, for instance, the one provided here.
It may however prove to be too much effort, so you should evaluate if you really require the border.
No, the <select> control is a system-level control, not a client-level control in IE. A few versions back it didn't even play nicely-with z-index, putting itself on top of virtually everything.
To do anything fancy you'll have to emulate the functionality using CSS and your own elements.
Replacing the border-color with outline-color should work.
You can set the border color in IE however there are some issues.
Argh... I could have sworn you could do this... just tested and realized I wasn't correct. The notes below still apply though.
in IE8 (Beta1 -> RC1) changing the border color or the background color/image causes a de-theming of the control in WindowsXP (the drop arrow and box look like Windows 95)
you still can't style the options within the select control very well because IE doesn't support it. (see bug #291)
select{
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,color=#FF0000);
}
Works for me.
As Diodeus stated, IE doesn't allow anything but the default border for <select> elements. However, I know of two hacks to achieve a similar effect :
Use a DIV that is placed absolutely at the same position as the dropdown and set it's borders. It will appear that the dropdown has a border.
Use a Javascript solution, for instance, the one provided here.
It may however prove to be too much effort, so you should evaluate if you really require the border.
Source: Stackoverflow.com