I have a select box at http://dot.kr/x-test/select.php
although I put style=“border:red solid 5px” in Japan option because I like to make it that Japan has “5px red border” like Germany.
It seems not to work.
And I have one more question on this.
I like to make the “down arrow” which is next to Germany Red.
How can I make the down arrow RED?
First question, the border:
The <select> tag is not closed. Put a close select tag above the close body tag.
I see a good border in Firefox but none in Chrome nor Opera. Webkit? (mentioning the browser in which the problems occurs is often helpful). I have no solution.
Second question, the down-arrow:
I do not believe the down-arrow can be colored.
I created a red down-arrow using a div around the select box and an :after pseudoelement but it is a pixel or two off between FF, Chrome and Opera. Not suitably cross-browser, in other words.
Maybe someone else has some ideas.
Different browsers have different degrees of support for styling form elements. I would not bother going down this path. Use an alternative method if possible.
The only option to allow the level of control over the aesthetic of a select menu is to use a proxy element using JavaScript when available. There are several jQuery plugins that replicate common UI controls like select boxes with mark-up to allow the level of control your after with the default HTML element as a fallback. However, you must really ask yourself if it is really worth it to add that complexity to achieve something so small and unlikely to add much value if any at all to the site. Depending on the level of quality of the plugin/script that builds the proxy there are likely going to be issues down the road when attempting to listen for events and what not in JavaScript on the proxied elements. Just a warning.
jQuery UI actually has one:
if you look at that mark-up for the select you will notice it is not a select HTML element but a built using divs and spans. The select element is hidden and interacting with the proxy (divs and spans) updates the hidden select. That way the “select” can be styled anyway you desire while also providing a fallback when JavaScript is unavailable.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.