Styling or replacing a standard selection item

Question

I searched a lot and can’t find the answer to what, in my opinion, can be a pretty direct question.

I want the style to be selected on my page, so this is basically a green square with the selected number (1-20) shown in white in the middle.

Here is what I still have:

select { width: 1.2em; height: 1.5em; background-color: #3CB23C; -moz-border-radius: 0.2em; border-radius: 0.2em; border: 0.06em outset #666; text-align: center; color: #fff; font-weight: bold; font-size: 4em; } 

So far, everything looks good, but I can’t find anything on how to remove the arrow to make it look like a box with a number.

(And before I get a thousand answers about why I shouldn't do this ... I know . I read them all before! I don't ask you to tell me if I should . I ask how I do it . This is for mobile applications where the number will be selected by clicking the green frame and then selecting the number from the resulting list. Obviously, the box makes it so that there is no need to enter into the accessibility dialog).

I read a lot about the fact that I cannot easily style styling elements and other form elements, and I also read a lot of answers that cause something like:

"You cannot customize the control yourself, but using JavaScript you can hide it and create functional JavaScript controls to act like a drop down. When an item is selected, it selects the item in the frame down."

but then surprisingly few examples.

Does anyone have a way pf to style the arrow so that it "disappears", or if it is not possible to use just CSS to remove the arrow, are there any good examples of how to replicate this effect using Javascript?

thanks

Answer 1

In wekbit browsers you can use:

 select { -webkit-appearance: none; } 

It does not work in ie or firefox, even with -moz-appearance: none; or appearance: none;

jsFiddle

---

But IMHO, it’s better to do this: fine-tune the style of the elements and animate them using jQuery. Then add a hidden element that is populated with jQuery with the elements above. This is a little longer, but you will not have browser compatibility issues.

Answer 2

@pinouchon answer is correct, how to remove the arrow. And if you're fine with the default style for the part that crashes, you can save a ton of work (keyboard usage, accessibility issues, cross-platform behavior, mousedown-vs.-click-vs .click and hold, ...) .

But, if you can use -webkit-appearance / -moz-appearance to override the style for the part that is initially displayed, there seems to be no way to restore the part that is falling. In this case, you need to go the route of creating a fake selection menu using JavaScript and inserted HTML elements and hope that you cover all of the above use cases.

An example of this last approach that our team has begun to use is the Felix Nagel selectmenu jQuery UI plugin .

Answer 3

Here are some tips on how you can do this. The idea is to hide arroi with owerflow: hidden; business.

 <style> div{ float:left; width:90px; height:100px; overflow:hidden; } select { float:left; width: 3.2em; height: 1.5em; background-color: #3CB23C; margin-left:-8px; text-align: center; color: #fff; font-weight: bold; font-size: 4em; } </style> <div> <select> <optgroup label="Server-side languages"> <option>21</option> <option>22</option> </optgroup> <optgroup label="Client-side languages"> <option>23</option> <option>25</option> </optgroup> </select> </div>