Is transparentize border, background one by one is the only way? Any other method? And how to hide the dropdown icon of a SELECT input?
+1
A:
Is transparentize border, background one by one is the only way?
Without JavaScript: Yes.
And how to hide the dropdown icon of a SELECT ?
You won't be able to do this without some very shaky tricks (e.g. having a relatively positioned DIV next to the SELECT, overlapping the button, which is never reliable because the size of the dropdown button can vary.)
Pekka
2010-04-03 12:01:34
If using js, will there be a stable solution?
Edward
2010-04-03 12:04:52
@Relax You could make the input `display: none`, and copy its value into a `span` element for example. It's stable as in that it works across all browsers, yes. What do you need this for?
Pekka
2010-04-03 12:07:25
@Pekka, sounds great! I need this for show input only when focusing to match the design
Edward
2010-04-03 12:11:56
@Relax hmmmm. Wouldn't that be easier to achieve by using the `:focus` CSS pseudo-class? Giving an unfocused input element transparent borders and backgrounds, and normal borders to a focused one? Works in almost all browsers (IE > 7 IIRC).
Pekka
2010-04-03 12:16:14
@Pekka, but i don't know how to hide the dropdown icon on the right of a SELECT input...
Edward
2010-04-03 12:17:34
@Relax aahh, you will need Javascript there, true. I don't have the time to work out a full solution for that, it's a task on its own: Hide a `select` and copy its selected value to a `span` element, and make the `select` visible again when the `span` is clicked... If you get stuck, maybe open a separate question for that.
Pekka
2010-04-03 12:21:38
the logic is simple, i think i can write it. i am just curious at how they make a new style (different dropdown icon/button) for select input, i just tried apply a background image, but the icon is still there
Edward
2010-04-03 12:41:55
@Relax the dropdown button of the `<select>` element is rendered by the browser in the style of the operating system. Those parts are outside the user's control, you can't influence it using CSS.
Pekka
2010-04-03 13:06:36
You might also try one of the many progressive-enhancement JavaScript select-box replacements, which give you more control over styling than a native select. (I'm a bit dubious about this whole idea though, as it seems to be risking accessibility and usability for a few mere cosmetic tweaks.)
bobince
2010-04-03 14:26:43
A:
If you're willing to use JS, the Uniform library might be of use: http://pixelmatrixdesign.com/uniform/ - it does very reliable 'skinning' of HTML forms with whatever graphics you want.
Beejamin
2010-04-03 14:27:41