Does anyone have a solution for styling the borders of ‘select’ elements in Internet Explorer using CSS?
Does anyone have a solution for styling the borders of select elements in Internet
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Does anyone have a solution for styling the borders of ‘select’ elements in Internet Explorer using CSS?
As far as I know, it’s not possible in IE because it uses the OS component.
Here is a link where the control is replaced, but I don’t know if thats what you want to do.
Edit: The link is broken I’m dumping the content
<select>Something New, Part 1By Aaron Gustafson
So you’ve built a beautiful, standards-compliant site utilizing the latest and greatest CSS techniques. You’ve mastered control of styling every element, but in the back of your mind, a little voice is nagging you about how ugly your
<select>s are. Well, today we’re going to explore a way to silence that little voice and truly complete our designs. With a little DOM scripting and some creative CSS, you too can make your<select>s beautiful… and you won’t have to sacrifice accessibility, usability or graceful degradation.The Problem
We all know the
<select>is just plain ugly. In fact, many try to limit its use to avoid its classic web circa 1994 inset borders. We should not avoid using the<select>though–it is an important part of the current form toolset; we should embrace it. That said, some creative thinking can improve it.The
<select>We’ll use a simple for our example:
[Note: It is implied that this
<select>is in the context of a complete form.]So we have five
<option>s within a<select>. This<select>has a uniquely assignedidof ‘something.’ Depending on the browser/platform you’re viewing it on, your<select>likely looks roughly like this:(source: easy-designs.net)
or this
(source: easy-designs.net)
Let’s say we want to make it look a little more modern, perhaps like this:
(source: easy-designs.net)
So how do we do it? Keeping the basic
<select>is not an option. Apart from basic background color, font and color adjustments, you don’t really have a lot of control over the .However, we can mimic the superb functionality of a
<select>in a new form control without sacrificing semantics, usability or accessibility. In order to do that, we need to examine the nature of a<select>.A
<select>is, essentially, an unordered list of choices in which you can choose a single value to submit along with the rest of a form. So, in essence, it’s a<ul>on steroids. Continuing with that line of thinking, we can replace the<select>with an unordered list, as long as we give it some enhanced functionality. As<ul>s can be styled in a myriad of different ways, we’re almost home free. Now the questions becomes ‘how to ensure that we maintain the functionality of the<select>when using a<ul>?’ In other words, how do we submit the correct value along with the form, if we are no longer using a form control?The solution
Enter the DOM. The final step in the process is making the
<ul>function/feel like a<select>, and we can accomplish that with JavaScript/ECMA Script and a little clever CSS. Here is the basic list of requirements we need to have a functional faux<select>:With this plan, we can begin to tackle each part in succession.
Building the list
So first we need to collect all of the attributes and s out of the and rebuild it as a . We accomplish this by running the following JS:
You might be thinking ‘now what happens if there is a selected
<option>already?’ We can account for this by adding another loop before we create the<li>s to look for the selected<option>, and then store that value in order toclassour selected<li>as ‘selected’:[Note: From here on out, option 5 will be selected, to demonstrate this functionality.]
Now, we can run this function on every
<select>on the page (in our case, one) with the following:We are nearly there; let’s add some style.
Some clever CSS
I don’t know about you, but I am a huge fan of CSS dropdowns (especially the Suckerfish variety). I’ve been working with them for some time now and it finally dawned on me that a
<select>is pretty much like a dropdown menu, albeit with a little more going on under the hood. Why not apply the same stylistic theory to our faux-<select>? The basic style goes something like this:Now, to handle the ‘selected’ list item, we need to get a little craftier:
Notice that we are not using the :hover pseudo-class for the
<ul>to make it open, instead we areclass-ing it as ‘selectOpen’. The reason for this is two-fold:<select>behave like a real<select>, we need the list to open in anonclickevent and not on a simple mouse-over.To implement this, we can take what we learned from Suckerfish and apply it to our own JavaScript by dynamically assigning and removing this
classin “onclickevents for the list items. To do this right, we will need the ability to change theonclick` events for each list item on the fly to switch between the following two actions:<select>when clicking the selected/default option when the list is collapsed; and<select>.We will create a function called
selectMe()to handle the reassignment of the ‘selected’class, reassignment of theonclickevents for the list items, and the collapsing of the faux-<select>:As the original Suckerfish taught us, IE will not recognize a hover state on anything apart from an
<a>, so we need to account for that by augmenting some of our code with what we learned from them. We can attach onmouseover and onmouseout events to the ‘selectReplacement’class-ed<ul>and its<li>s:Then, we can modify a few selectors in the CSS, to handle the hover for IE:
Now we have a list behaving like a
<select>; but we still need a means of changing the selected list item and updating the value of the associated form element.JavaScript fu
We already have a ‘selected’
classwe can apply to our selected list item, but we need a way to go about applying it to a<li>when it is clicked on and removing it from any of its previously ‘selected’ siblings. Here’s the JS to accomplish this:[Note: we can use simple
classNameassignment and emptying because we are in complete control of the<li>s. If you (for some reason) needed to assign additional classes to your list items, I recommend modifying the code to append and remove the ‘selected’ class to yourclassNameproperty.]Finally, we add a little function to set the value of the original
<select>(which will be submitted along with the form) when an<li>is clicked:We can then add these functions to the
onclickevent of our<li>s:There you have it. We have created our functional faux-
. As we have not hidden the originalyet, we can [watch how it behaves](files/4.html) as we choose different options from our faux-. Of course, in the final version, we don't want the originalto show, so we can hide it byclass`-ing it as ‘replaced,’ adding that to the JS here:Then, add a new CSS rule to hide the
With the application of a few images to finalize the design (link not available) , we are good to go!
And here is another link to someone that says it can’t be done.