how to remove blue highlight on hover in select, option inputs html for chrome
Unfortunately there isn't yet an option for styling this or removing the default background-color in Chrome.
The best option currently is to create your own select box from a UL
Something like this might work:
<style type="text/css">
.select ul li.option {
background-color: #DEDEDE;
box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
-webkit-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
-moz-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
}
.select ul li.option:hover {
background-color: #B8B8B8;
}
.select ul li.option {
z-index: 1;
padding: 5px;
list-style: none;
}
.select ul.closed li.option {
display: none;
}
.select ul.closed li:first-child {
display: block;
}
.select ul li {
cursor: default;
}
</style>
<div class="select">
<ul style="width:150px;" id="selectbox" class="closed">
<li values="1" class="option">Dropdown one</li>
<li values="2" class="option">Dropdown two</li>
<li values="3" class="option">Dropdown three</li>
</ul>
</div>
<script>
var s = document.getElementById("selectbox");
selectbox.onclick = function () {
selectbox.classList.toggle('closed');
}
</script>
Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?
You can use pure CSS to accomplish this. Here's a rundown for multi-browser support, chrome being covered by the first line and the final :focus
bit. Details below.
.noSelect {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.noSelect:focus {
outline: none !important;
}
Simply add the class="noSelect"
attribute to the element you wish to apply this class to. I would highly recommend giving this CSS solution a try. Some have suggested using JavaScript, but I believe this is the cleanest solution.
For Android/Safari mobile/Edge
-webkit-tap-highlight-color: transparent;
is the additional rule you may be looking for. Affects Chrome desktop (esp. with touchscreen) and mobile devices. Here's a warning about using this non-standard property, as well as some accessibility concerns with suggestions. Best practice is to replace the highlight with your own styling.
UPDATE: Later versions of Chrome...
A commenter on this answer pointed out :focus { outline: none !important;}
is needed for newer versions of Chrome. Answer adapted to include this, as well! Ah, ever-changing standards.
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;
}
How to remove the blue highlight of button on mobile?
You can add:
-webkit-tap-highlight-color: transparent;
You can also add this to your stylesheets to define it globally:
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Hope this helps :)
You can find the documentation here for more info: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5
Related Topics
Angular2, What Is the Correct Way to Disable an Anchor Element
How to Make the Height of the Div Dynamically Fit the Size of the Div in Which It Is Contained
Mp4 Video Is Not Playing on Mobile Devices and Chrome
Html5 Input Type Date Format to Mm/Dd/Yyyy Causing Issue in Chrome
How to Make Custom Dots in Owl Carousel
Removing Margin from Flex Items When They Wrap
First Name Validation Using HTML 5 Pattern
Multiple Select Dropdown Not Working With Ng-Option
Rendering HTML Content With @Html.Raw in Razor Mail Template
Html Wont Link to CSS File in Visual Studio Code
How to Make Vertical Lines Between List Items Using CSS
How to Change Pressed Item Background Color in Ion-List on Ionic
Change Default Text in Input Type="File"
Inserting Form Data into MySQL Database When Using Nodejs Express
How to Put CSS @Media Rules Inline