Changing select highlight color
No idea what you mean about "the color that highlights <li>
", but it sounds like you want to change the background colour of <option>
elements. I tried it and it doesn't work, you always get the system color.
If you wanted to highlight the entire <select>
element on mouseover, this kinda works:
select:hover { background-color: red; }
However the behaviour is different in different browsers. For example, Chrome doesn't highlight the options in the drop down; Firefox does, but then it doesn't change them back if you move the mouse away and they are still pulled down.
As has been stated on many, many similar questions, you can't reliably style form controls. See here for more details.
Change 'select' highlight color
Well you cannot change the hover color of select option as it is rendered by Operating System instead of HTML however your second answer for removing the blue outline is as under:
Add outline:none
to your css:
.contactselect select
{
background: url(Images/ArrowO.png) no-repeat right #000;
width:268px;
padding:5px;
color:#F7921C;
font-size:25px;
font-family:dumbledor;
line-height:1;
border:solid 4px #F7921C;
border-radius:10px;
height:45px;
-webkit-appearance:none;
outline: none;
}
Here is the JS Fiddle Demo .
Change the position of blue highlight on select box dropdown
give padding top to every list item of dropdown menu, a
How to remove blue highlighting on clicking an option in a select
I found the solution. Since it does not seem to be possible, to remove the blue highlighting, I will make it transparent by setting the image of the background which is in the body, also inside the option.
select option:checked {
background-image: url("ImageOfTheBody.jpg");
background-attachment: fixed; /*This will give the illusion of being transparent*/
background-repeat: no-repeat;
background-size: cover;
}
Related Topics
Better Way to Set Distance Between Flexbox Items
How to Use Jsf Generated HTML Element Id With Colon ":" in CSS Selectors
What's the Difference Between Scss and Sass
How to Style a Select Tag'S Option Element
Position Deeply Nested Elements in a Higher Level Grid Container
Make Flex-Grow Expand Items Based on Their Original Size
Customizing Bootstrap CSS Template
Why Isn't It Possible to Combine Vendor-Specific Pseudo-Elements/Classes into One Rule Set
What's the Difference Between Align-Content and Align-Items
Opacity of Background-Color, But Not the Text
Why Do Browsers Create Vendor Prefixes For CSS Properties
Select Elements by Attribute in Css
Is the Viewport Meta Tag Really Necessary