Is it possible to change the default background color of a select list option on hover?
HTML:
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I have tried option:hover { background-color: red; }, but it is of no use. Does anybody know how to do this?
This can be done by implementing an inset box shadow.
eg:
select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}
Here, .decorated is a class assigned to the select box.
Hope you got the point.
Select / Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.
This way we can do this with minimal changes :)
option:hover {
background-color: yellow;
}
<select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Implementing an inset box shadow CSS works on Firefox:
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
Checked option item works in Chrome:
select:focus > option:checked {
background: #000 !important;
}
There is test on https://codepen.io/egle/pen/zzOKLe
For me this is working on
Google Chrome
Version 76.0.3809.100 (Official Build) (64-bit)
Newest article I have found about this issue by Chris Coyier (Oct 28, 2019) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/
The problem is that even JavaScript does not see the option element being hovered. This is just to put emphasis on how it's not going to be solved (any time soon at least) by using just CSS:
window.onmouseover = function(event)
{
console.log(event.target.nodeName);
}
The only way to resolve this issue (besides waiting a millennia for browser vendors to fix bugs, let alone one that afflicts what you're trying to do) is to replace the drop-down menu with your own HTML/XML using JavaScript. This would likely involve the use of replacing the select element with a ul element and the use of a radio input element per li element.
Select / Option elements are rendered by the OS/Client, not HTML.
You cannot change the style for these elements in modern Browser.
On older clients
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
Checked option item works in older Chrome:
select:focus > option:checked {
background: #000 !important;
}
Adding/toggling size attributes on focus event as suggestest by #Krishnaraj works pretty well on desktop using mouse controls.
However, the previous answers don't work well with keyboard controls.
The following example wraps the aforementioned state toggling into a javaScript helper function and adds additional event listeners for better accessibility
setSelectHover();
function setSelectHover(selector = "select") {
let selects = document.querySelectorAll(selector);
selects.forEach((select) => {
let selectWrap = select.parentNode.closest(".select-wrap");
// wrap select element if not previously wrapped
if (!selectWrap) {
selectWrap = document.createElement("div");
selectWrap.classList.add("select-wrap");
select.parentNode.insertBefore(selectWrap, select);
selectWrap.appendChild(select);
}
// set expanded height according to options
let size = select.querySelectorAll("option").length;
// adjust height on resize
const getSelectHeight = () => {
selectWrap.style.height = "auto";
let selectHeight = select.getBoundingClientRect();
selectWrap.style.height = selectHeight.height + "px";
};
getSelectHeight(select);
window.addEventListener("resize", (e) => {
getSelectHeight(select);
});
/**
* focus and click events will coincide
* adding a delay via setTimeout() enables the handling of
* clicks events after the select is focused
*/
let hasFocus = false;
select.addEventListener("focus", (e) => {
select.setAttribute("size", size);
setTimeout(() => {
hasFocus = true;
}, 150);
});
// close select if already expanded via focus event
select.addEventListener("click", (e) => {
if (hasFocus) {
select.blur();
hasFocus = false;
}
});
// close select if selection was set via keyboard controls
select.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
select.removeAttribute("size");
select.blur();
}
});
// collapse select
select.addEventListener("blur", (e) => {
select.removeAttribute("size");
hasFocus = false;
});
});
}
body {
font-size: 10vmin;
}
select {
--selectHoverCol: #999;
--selectedCol: red;
width: 100%;
font-size: 1em;
padding: 0.3em;
background-color: #fff;
}
select:focus {
border-radius: 0px;
border-color: red;
background: #fff;
outline: none;
}
.select-wrap {
position: relative;
}
.select-wrap:focus-within select {
position: absolute;
top: 0;
left: 0;
z-index: 10
}
option:hover {
background-color: var(--selectHoverCol);
color: #fff;
}
option:checked {
box-shadow: 0 0 1em 100px var(--selectedCol) inset;
}
<select class="selectHovercolor">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<p>paragraph</p>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="Lexus">Lexus</option>
<option value="Mercedes">Mercedes</option>
</select>
<p>paragraph</p>
The select field is wrapped in a <div> with relative position.
:focus-within pseudo state toggles the select positioning between absolute and initial (static) – this way we can avoid layout shifts.
the wraping div height is recalculated on resize
since the focus event coincides with with the click event, we add a delay for click events, triggering the select field to collapse after selection
If an option was selected via keyboard controls and selection was confirmed by pressing "enter" - the size attribute is removed.
size attribute is set according to the actual number of <option> elements
You can do this, just know that it will change all of the select inputs throughout the html, it doesn't change the blue hover, but it does style everything else.
option {
background: #1b1a1a !important;
color: #357b1d !important;
}
select {
background: #1b1a1a !important;
color: #357b1d !important;
}
// If you also want to theme your text inputs:
input {
background: #1b1a1a !important;
color: #357b1d !important;
}
<html>
<head>
<style>
option:hover {
background-color: yellow;
}
</style>
</head>
<body>
<select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
This worked for me in chrome!
<select onfocus='this.size=10;'>
<option>Crossing</option>
<option>Crossing Up</option>
<option>Crossing Down</option>
</select>
<style>
select option:hover {
box-shadow: 0 0 10px 100px green inset;
color:white;
}
select option:checked{
box-shadow: 0 0 10px 100px green inset;
}
</style>
However, the checked option's background will remain same even if i hover on another option
By the way, you can do that one as well.
Here is the link for that: https://www.w3schools.com/howto/howto_custom_select.asp
I would consider switching from a <select> element to a <div> list, like below:
https://jsfiddle.net/getbutterfly/gquh02dz/
This will make it cross-browser compatible. Every other method using CSS appearance tricks and <select> dropdowns is hacky.
HTML
<div class="sel">
<div class="label">Select option...</div>
<div class="options">
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
<div>Lot of text to display, so it can expand multiple lines and expand the select main text also</div>
</div>
</div>
JavaScript
const sel = document.querySelector('.sel');
const label = document.querySelector('.label');
const options = document.querySelector('.options');
options.setAttribute('hidden', true);
sel.addEventListener('click', (e) => {
e.stopPropagation();
options.removeAttribute('hidden');
});
document.body.addEventListener('click', (e) => {
options.setAttribute('hidden', true);
});
options.addEventListener('click', (e) => {
if (e.target.tagName === 'DIV') {
e.stopPropagation();
label.textContent = e.target.textContent;
e.target.classList.add('selected');
Array.from(e.target.parentNode.children).forEach((child) => {
if (child !== e.target) {
child.classList.remove('selected');
}
});
options.setAttribute('hidden', true);
}
});
CSS
* {
box-sizing: border-box;
}
.sel {
color: #000000;
width: 250px;
box-sizing: border-box;
background-color: #ffffff;
border: 1px solid #000000;
overflow: hidden;
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat calc(100% - 10px) 14px;
}
.label,
.sel .options div {
padding: 10px;
}
.selected {
background-color: #ff0000;
}
.sel .options {
width: 250px;
background-color: #ffffff;
}
.sel .options div:hover {
background-color: #00ff00;
}
With a bit of extra CSS, the dropdown can be animated and the selected text can be truncated to fit inside a fixed height, behaving exactly like a <select> element.
I realise this is an older question, but I recently came across this need and came up with the following solution using jQuery and CSS:
jQuery('select[name*="lstDestinations"] option').hover(
function() {
jQuery(this).addClass('highlight');
}, function() {
jQuery(this).removeClass('highlight');
}
);
and the css:
.highlight {
background-color:#333;
cursor:pointer;
}
Perhaps this helps someone else.
this is what you need, the child combinator:
select>option:hover
{
color: #1B517E;
cursor: pointer;
}
Try it, works perfect.
Here's the reference: http://www.w3schools.com/css/css_combinators.asp
How to create conditional logic link with drop-down field in html? eg drop down field= item1, item2 and suit button link based on item1=url1 or item2=url2.
Here's a very basic example showing how to redirect the browser to the url selected from a dropdown among a list of options, when the form gets submitted.
This demo adds a submit event listener to the #mainForm when the page has loaded, that will cancel the default behaviour with event.preventDefault() (mdn) and will visit the page at the url defined in the selected option (mdn).
Plus the dropdown itself listens for the change event printing on console the latest url selected and enabling the submit button as soon as a valid option was chosen.
Two ways to listen to events were showed here... both with addEventListener and with the onchange html attribute in the declarative way.
document.addEventListener('DOMContentLoaded', ()=>{
const mainForm = document.getElementById('mainForm');
mainForm.addEventListener('submit', (event)=>{
event.preventDefault();
const url = fetchSelectedUrl();
location.assign(url);
});
});
function fetchSelectedUrl(){
document.querySelector('#mainForm button[type=submit]').removeAttribute('disabled');
const url = document.getElementById('urls').value;
console.log(`Selected url: ${url}`);
return url;
}
label{
margin-right: 1rem;
font-size: 1rem;
}
#urls{
padding: 0.25rem;
}
form{
width: 50%;
}
.row{
display: flex;
margin-bottom: 1rem;
}
.row > *:nth-child(1){
flex: 25%;
}
.row > *:nth-child(2){
flex: 75%;
}
.submit{
text-align: right;
}
button[type=submit]{
padding: 0.25rem 0.75rem;
cursor: pointer;
font-weight: bold;
}
<form id="mainForm">
<div class="row">
<label for="urls">Select a page to visit:</label>
<select id="urls" onchange="fetchSelectedUrl();">
<option value="" disabled selected>Select an option</option>
<option value="https://google.com">Google (com)</option>
<option value="https://google.de/">Google (de)</option>
<option value="https://google.fr">Google (fr)</option>
</select>
</div>
<div class="submit">
<button type="submit" disabled>GO!</button>
</div>
</form>
I saw similar solutions on detecting and assigning actions when 'X' button pressed on type="search" textfield action upon pressing X button.
I want to do using #Html.TextBoxFor(model => model.SearchTerm, new { id = "search-box", type = "search"}. However it cannot fire the event specifically on clearance button 'X' click.
So far I have managed to register all events:
$('#search-box').on('click', function (e) {
alert(e);
System.Diagnostics.Debug.Write(e.target);
});
Any help would be greatly appreciated
I have tried following code:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="clearable" type="text" name="" value="" placeholder="" />
JQuery:
function tog(v){return v?'addClass':'removeClass';}
$(document).on('input', '.clearable', function(){
$(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
ev.preventDefault();
alert('33');// put window.location('url goes here');
$(this).removeClass('x onX').val('').change();
});
CSS:
.clearable{
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
Fiddle is here : click here
Hope it helps you .. :)
Happy Coding..
I am really confuded in this. I have a label and select drop-down inside my container which is right aligned.
GOAL
Container should act like a drop-down. Only sort-by label should be displayed initially.When user clicks on it, it should shoe the option to the user.
Problem
I don't know how to trigger drop down when i click on the sort by label.
<div class="container">
<label class="Sortlabel">Sort by</label>
<select>
<option>2</option>
<option>22</option>
<option>222</option>
</select>
</div>
If i must use jquery or JS, i ll add these tags also. Any suggestions??
And what is the difference with this one : http://jsfiddle.net/csdtesting/vuc81u87/
Result is the same.
<div class="container">
<label class="Sortlabel"></label>
<select>
<option>Sort by</option>
<option>22</option>
<option>222</option>
</select>
</div>
select
{
width:100%;
-webkit-appearance: none;
}
.container
{
float: right;
width:190px;
}
But if you insists.I took this idea
and here it is (Pure Javascript): http://jsfiddle.net/csdtesting/ybjdsqrx/
var state = false;
// <select> element displays its options on mousedown, not click.
showDropdown = function(element) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(event);
};
// This isn't magic.
window.runThis = function() {
var dropdown = document.getElementById('sel');
showDropdown(dropdown);
};
select {
-webkit-appearance: none;
border: none;
width: 70%;
}
.container {
width: 100%;
float: left;
width: 190px;
border: 1px solid;
}
.Sortlabel {
width: 20%;
}
}
<div class="container">
<label class="Sortlabel" onclick="runThis()">Sort by</label>
<select id="sel">
<option></option>
<option>2</option>
<option>22</option>
<option>222</option>
</select>
</div>
I want a way (ideally just using CSS HTML) where when I click on Question, the text shows and remains there. Then if they click on text again, it will revert back to question.
It works on hover, but I don't know how to make it on click. HTML:
<div id="packagequestioninfo">
<p class="packagereplies">Question</p>
<p class="packagecomment">If you require <b>hosting</b> for your website, select your primary website and go to <b>Part II</b>. If you do not require hosting, please Checkout below. </p>
</div>
CSS:
#packagequestioninfo {
padding: 10px;
background: #F2F7FA;
border-radius: 0px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}
#packagequestioninfo:hover {
background-image:url(../img/index/body/ourproducts/light_blue_background_pattern.jpg);
background-repeat:repeat;
cursor: none;
}
#packagequestioninfo .packagecomment {
display: none;
}
#packagequestioninfo:hover .packagereplies {
display: none;
}
#packagequestioninfo:hover .packagecomment {
display: inline;
}
Here is the code http://jsfiddle.net/53UK2/
Make .packagecomment invinsible with css, then use jQuery:
$('p').click(function(){
$('p').toggle();
});
Fiddle: http://fiddle.jshell.net/RcTGN/
If you do not need IE8 and lower support you can do it with pure CSS like this.
This is because of the ":checked" css selector. See support here.
The HTML:
<div class="question">
<input type="checkbox" class="qestion-checkbox" id="q1" />
<label for="q1" class="qestion-text">Question 1 text</label>
<label for="q1" class="qestion-answer">Question 1 answer</label>
</div>
<div class="question">
<input type="checkbox" class="qestion-checkbox" id="q2" />
<label for="q2" class="qestion-text">Question 2 text</label>
<label for="q2" class="qestion-answer">Question 2 answer</label>
</div>
The CSS:
.qestion-answer, .qestion-checkbox {
display: none;
}
.qestion-checkbox:checked + .qestion-text {
display:none;
}
.qestion-checkbox:checked + .qestion-text + .qestion-answer {
display:block;
}
If you do need IE8 and lower support you need to use some javascript/jQuery
It's impossible using only css. Of course you can change :hover instead :active, but it will be work when the mouse button is held down.
Check it.
Why don't you want use jquery? It will be easier.
Non-jquery way...
Just showing and hiding by changing the display style attribute:
HTML:
<script src="javascriptfile.js"></script>
<div id="packagequestioninfo">
<p class="packagereplies">Question</p>
<p class="packagecomment">If you require <b>hosting</b> for your website, select your primary website and go to <b>Part II</b>. If you do not require hosting, please Checkout below. </p>
</div>
javascriptfile.js:
// Wait for the entire window elements to be loaded
window.onload = function() {
document.addEventListener('packagequestioninfo').addEventListener('onclick', function() {
if(document.getElementById('packagecomment').style.display !== 'none') {
document.getElementById('packagecomment').style.display = 'none';
} else {
document.getElementById('packagecomment').style.display = 'block';
}
});
}
or if you'd like to go with the class toggling method:
window.onload = function() {
document.addEventListener('packagequestioninfo').addEventListener('onclick', function() {
if(document.getElementById('packagecomment').className.indexOf('show')) {
document.getElementById('packagecomment').className = '';
} else {
document.getElementById('packagecomment').className = 'show';
}
});
}
in this approach you'll need to add a class to your CSS:
.show{
display:block;
}