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

I would consinder enclosing that select block within a div block and setting the border property like this    x000D   x000D   lt div style  border  2px solid blue   gt  x000D     lt select style  width  100    gt  x000D       lt option value  Sal  gt Sal lt  option gt  x000D       lt option value  Awesome  gt Awesome  lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    You should be able to play with that to accomplish what you need

User · Answer

I would consinder enclosing that select block within a div block and setting the border property like this    x000D   x000D   lt div style  border  2px solid blue   gt  x000D     lt select style  width  100    gt  x000D       lt option value  Sal  gt Sal lt  option gt  x000D       lt option value  Awesome  gt Awesome  lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    You should be able to play with that to accomplish what you need

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

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

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

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

Replacing the border-color with outline-color should work

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

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

I would consinder enclosing that select block within a div block and setting the border property like this    x000D   x000D   lt div style  border  2px solid blue   gt  x000D     lt select style  width  100    gt  x000D       lt option value  Sal  gt Sal lt  option gt  x000D       lt option value  Awesome  gt Awesome  lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    You should be able to play with that to accomplish what you need

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

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

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

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

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

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

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

Replacing the border-color with outline-color should work

User · Answer

I would consinder enclosing that select block within a div block and setting the border property like this    x000D   x000D   lt div style  border  2px solid blue   gt  x000D     lt select style  width  100    gt  x000D       lt option value  Sal  gt Sal lt  option gt  x000D       lt option value  Awesome  gt Awesome  lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    You should be able to play with that to accomplish what you need

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

Examples related to html

Examples related to css

Examples related to html-select