Change border color on select HTML form

Question

Is it possible to change the border color on a  lt select  gt  element in an HTML form   The border-color style works in Firefox but not IE   I could find no real answers on Google

User · Accepted Answer

I would consinder enclosing that select block within a div block and setting the border property like this:

_x000D_

<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>

_x000D_

You should be able to play with that to accomplish what you need.

User · Answer

Replacing the border-color with outline-color should work

User · Answer

lt style gt   form-error           border  2px solid  e74c3c         lt  style gt      lt div class  quot form-error quot  gt                                      Form  select  color    colors- gt prepend  Please Select Color                     class    gt   form-control dropselect form-error                                    tabindex    gt   count     id    gt   color                                         lt  div gt

User · Answer

No  the  lt select gt  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

User · Answer

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

User · Answer

No  the  lt select gt  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

User · Answer

No  the  lt select gt  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

User · Answer

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

User · Answer

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

User · Answer

As Diodeus stated  IE doesn t allow anything but the default border for  lt select gt  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

User · Answer

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

User · Answer

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

User · Answer

As Diodeus stated  IE doesn t allow anything but the default border for  lt select gt  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

User · Answer

Replacing the border-color with outline-color should work

User · Answer

No  the  lt select gt  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

User · Answer

lt style gt   form-error           border  2px solid  e74c3c         lt  style gt      lt div class  quot form-error quot  gt                                      Form  select  color    colors- gt prepend  Please Select Color                     class    gt   form-control dropselect form-error                                    tabindex    gt   count     id    gt   color                                         lt  div gt

User · Answer

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

User · Answer

As Diodeus stated  IE doesn t allow anything but the default border for  lt select gt  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

User · Answer

As Diodeus stated  IE doesn t allow anything but the default border for  lt select gt  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

[html] Change border color on <select> HTML form

Examples related to html

Examples related to css

Examples related to html-select