Is it possible to remove the blue "v" icon on a html thing?
Or how can I make it disappear? Or can I change it?
If I want to remove it what are my options?
<select> is not styled by CSS, it's styled by the operating system. You can make it look the way you want by using an CSS+HTML+JavaScript replacement, but that requires a plug-in or a bit of code.
You can use Uniform to replace your <select> elements with themable JavaScript-based equivalents. Uniform is nice because it degrades gracefully to your original <select> box in the absence of JavaScript.
I use this jQuery/CSS plugin to style select boxes: http://www.adamcoulombe.info/lab/jquery/select-box/
The only way to have a be styled exactly as you want is to not use ...
Google 'custom select box' and you'll find a bunch of alternatives (some of the mentioned by others here)
Like pointed by #Diodeus, it's impossible to change <select> appearance using CSS.
But you always can hope in jQuery. I suggest you to try the selectBox, a jQuery plugin with does auto select replacement. Very easy and very powerfull.
Related
Is there any way I can change the color of the datalist (black box appearing in the image)
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
EDIT: you might be seeing it as white, it takes the default color of system
Datalist has very few to no possibilities when it comes to design. There may be vendor specific styling, but I would not advice using them in production environments.
The best workaround is to repaint the whole datalist with JavaScript like awsomplete does it. -> https://leaverou.github.io/awesomplete/
You cannot style these elements like select and datalist it has very little flexibility in styling.
Browsers define their own styles to the elements I mentioned above.
Try to read this guide
I want to change a select tag arrow with an image, and also I want to have another image as hover state, and one for pressed state. And I should do that with CSS2.1 (no CSS3 solution please). How can I do that?
Whenever I need to style selects I use http://jamielottering.github.com/DropKick/
U can use background-image property in "element name":hover,"element":visited
That is not possible to do with just CSS, you will have to make use of JavaScript to accomplish it.
The only crossbrowser way to style form fields other than text fields and buttons is using JavaScript to implement custom form-controls.
I would like to add an extra border (thick) on my controls like here: http://tickspot.com/screenshots/
As we see in this link, the combos list and textbox have a blue tick border.
How can I achieve this without too much effort?
Thank you.
A CSS only solution might be to use both border and outline styles : http://jsfiddle.net/RyJzC/
(But remember outline is used to give an indication that an element has focus so make sure you take this behaviour into account if you do style outline)
Not all form elements properly support css styling. You could probably find some styles that work across the board, but it might take some work.
The easier option to get consistency is to wrap your controls in a <span class='control'></span> The downside to this method is that you have to add extra markup. You could give all the elements on your page class='addBorder' or something similar and then use JavaScript to find them and wrap them. That'd be a very unobtrusive method. Comment if you need help on implementing this and I'd be happy to help.
You may nest your elements and give the outer element the border and the padding.
here you'll get an impression: http://jsfiddle.net/jy92c/1/
[I don't want the Unicode character]
For example: With using Black down-pointing triangle.
It'll using -webkit-appearance: none; to make it look better.
It would be simple as:
Select ▼
to
Select ▼
Value1
Value2
or something similar
HTML:
<select>
<option>Value1</option>
<option>Value2</option>
</select>
QUESTION: How to do it in pure CSS, without any JavaScript?
Select boxes are not really styleable, so I wouldn't be surprised if this was impossible. Some limited styling options are available, but even they are unreliable. The only way to effectively style a select box is via jQuery and, unfortunately, images. My favourite form styling plugin is this Uniform - maybe it's worth to have a look at it.
I came up with this pure HTML, hacky solution, but it sucks. The arrow catches mouse events before they reach the select box. You'd need to do some hacking to eliminate that.
You can see here a css only solution, available only for webkit
Is it possible to have an HTML select field where the OPTION text is of different colors?
<select>
<option>Black_text (yellow_text)</option>
</select>
I tried using an CSS SPAN element to color the text but that doesn't seem to work.
Any ideas?
UPDATE: Note, I'm trying to have multiple font colors on the same OPTION row. I've seen quite a few tutorials on how to style the entire OPTION row but I'm trying to style elements within the same option row.
Try to style the option elements itself:
<option style="…">Label</option>
But I doubt that browsers support much styling of these elements.
Edit
I'm trying to have multiple font colors on the same OPTION row.
That’s not possible as the option element does only allow text as content:
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
You probably can't do it with a plain vanilla select list. However, it probably would be possible to use Javascript + HTML + CSS to make your own "select list" using just div and span elements and that correct onclick, and onmouseover javascript. Would be much more difficult, but if it's really important, you could probably get it to work.
Why dont you put a background image on every row like this:
<option style="background-image: multicolorimage.jpg>some text</option>
sorry, wrong answer. At first I didnt understand what you are trying to do so disregard my post :)
No, but you can use stuff like http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ that builds its own selectbox using button and span tags.