I have added a specific color and border for a select box on hover. At the moment the options also take the same color and border when you hover on the select. Both the options and select return to their normal css state upon mouseout. Is there a way to prevent the options from inheriting the hover css of the select box ?
My html -
<div class="roi-provider-list">
<select id="providersList" class="roi-header-select">
<option value="">All providers</option>
<option value="7">BELL MOBILITY</option>
<option value="32">ROGERS WIRELESS</option>
</select>
</div>
CSS -
select.roi-header-select:hover {
background-image: url(../../Images/Icons/arrow_down_orange.png);
background-color: #fff;
border: 1px solid #f68c23;
color: #f68c23;
}
Ive also tried the following but to no avail -
select.roi-header-select:hover > option {
border: 1px solid #c8d1d5;
color: #102938;
cursor: pointer;
}
Also -
select.roi-header-select:hover option {
border: 1px solid #c8d1d5;
color: #102938;
cursor: pointer;
}
Thoughts?
select.roi-header-select option:hover {
your rules
}
Here you should overwrite all rules from select.
You have to add a 100% width and Height like this: height: 100%; width: 100%; to the hover CSS
Related
I currently have a select element as follows:
<select class="select" id="startYear" onChange={(event) => setStartYear(event.target.value)}>
Then I have a bunch of options elements as well. Each looking as follows:
<option value=2017 selected={2017 == startYear}>2017</option>
<option value=2018 selected={2018 == startYear}>2018</option>
//lots of different years continuing on
I'm hoping to make it so that there's a static text that says "Start:" and then the dropdown is just all of the years (without the text). See the image below as an example. Anyone know where I can add the "Start:" text?
You would usually use a label for this kind of thing, where the label is to the left and the select box to the right.
div {
border: 1px solid black;
width: 100px;
border-radius: 15px;
padding: 5px 0 5px 10px
}
select {
border: none
}
<div>
<label for="start">Start: </label>
<select id="start">
<option>2017</option>
</select>
</div>
There is still an arrow there which your example image doesn't show, however, I would argue that you want to have the arrow there to denote that it's a select box/drop down. Without it, there's no indication and it's not friendly UX.
I was able to achieve this effect by surrounding the whole thing in a div, and adding the text and select there. With some css, it looks like a normal select prompt. You may have to fiddle with some of the variables to make it to your liking.
.select{
display: inline-block;
border: 2px solid black;
border-radius: 5px;
padding: 5px;
}
.select select {
display: inline-block;
border: none;
background-color: transparent;
}
.select select:focus-visible{
background-color: transparent;
border: none;
outline: none;
}
.select p {
display: inline-block;
text-align: center;
margin: 0;
}
<div class="select">
<p>Start:</p>
<select>
<option>15432542</option>
<option>54326</option>
<option>654262</option>
</select>
</div>
I'm trying to style some <LI> elements. I cannot understand why when they are focused on, their color property turns white. I have tried to include just about every pseudo-selector I know and included color: black, but for whatever reason in both Chrome and Firefox I see this behavior.
How can it be prevented it?
.select__label {
display: block;
}
.select__multiple {
border: 0;
display: block;
outline: 0;
border-collapse: collapse;
}
.select__multiple option {
border-width: 1px 0;
border-style: solid;
border-color: deepSkyBlue;
}
.select__multiple .select__option {
border: 1px solid lightGrey;
color: black;
padding: 12px 10px;
width: 150px;
}
.select__multiple .select__option:hover, .select__multiple .select__option:active, .select__multiple .select__option:visited, .select__multiple .select__option:focus, .select__multiple .select__option:checked, .select__multiple .select__option:selected {
color: black !important;
}
.select__multiple .select__option:checked {
color: black;
border-style: solid;
border-color: deepSkyBlue;
background: #dceff7 linear-gradient(0deg, #dceff7 0%, #dceff7 100%);
}
.select__multiple .select__option:checked + :checked {
border-top-width: 0;
border-top: 1px solid transparent;
}
<span class="select__label">options</span>
<select name="genders" class="select__multiple" multiple="multiple">
<option class="select__option" checked>option 1</option>
<option class="select__option">option 2</option>
<option class="select__option">option 3</option>
<option class="select__option">option 4</option>
<option class="select__option">option 5</option>
</select>
Here is the correct way to prevent it. Add -webkit-text-fill-color property.
.select__multiple .select__option:checked {
color:black;
border-style: solid;
border-color: deepSkyBlue;
background: #dceff7 linear-gradient(0deg, #dceff7 0%, #dceff7 100%);
-webkit-text-fill-color: black;
}
Try impacting the following selector:
.select__multiple .select__option:checked {
-webkit-text-fill-color: black;
}
Is this an external stylesheet or an embedded one. External stylesheets that contain styles marked as !important takes precedence over embedded styles marked with !important. Styles however not marked with !important takes precedence in embedded styles over external sheets. Just make sure your wanted code is not overwritten by other code.
Furthermore you can right click on the element and click inspect on the element in the browser to see if any styles are overwritten in Chrome.
You can also check that your browser is not caching your external stylesheets thus not showing changes you make to your styles by clearing your browsing history.
I use this CSS to style drop down:
HTML code:
<div class="rd-navbar-contact-info">
<select class="logout" size="1" name="j_idt8">
<option value="Cream Latte">Help</option>
<option value="Extreme Mocha">Profile Settings</option>
<option value="Buena Vista">Logout</option>
</select>
</div>
.logout {
margin: 50px;
/*border: 1px solid #111;*/
background: transparent;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 0px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat transparent;
color: white;
}
.logout option {
background-color: black;
}
How i can remove the border of the options list? Or can I change it to black?
i think you should try by removing border property or try by making
border:0px solid #000 it might work
You just can't. The fact is you can edit the select box at your will using CSS, but the drop down list isn't HTML, thus is rendered by the browser and/or operative system the user is using to view your page. You can set attributes such as width, height, number of items and background, but you can't set the font, border attributes and so on.
I set a background image (arrow down) to a select box after setting the webkit-appearance attribute to none. When the option list is opened I want to display another background image (arrow up). Is there a pseudo class or something for it? I couldn't find anything during my research...
you can use the :focus pseudo class.
But this will indicate the "open" state, also when the <select> is selected via tab or an item was just selected. To circumvent this, you maybe use something like select:hover:focus but this is rather ugly and is not a solid solution.
select:focus {
background-color: blue;
color: white;
}
<select>
<option>Click me</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
It's not possible to detect if a HTML select element is opened using CSS, or even javascript.
If you wish to customise the arrow symbol of a custom dropdown, your best option is to use a custom dropdown component which maps to a hidden select element.
This post is old, but as today; the ::before and ::after pseudo-class still don't work on select element.
Here's a good opportunity to use the :focus-within pseudo-class. I made this simple codepen demonstrating the use of it.
The codepen
The snippet :
#charset "UTF-8";
.wrapper {
position: relative;
display: inline-block;
}
.wrapper::after {
content: "";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
right: 16px;
top: 22px;
font-size: 18px;
pointer-events: none;
transition: 0.2s ease;
}
.wrapper:focus-within::after {
transform: rotateX(0.5turn) translateY(-2px);
}
.wrapper select {
background: linear-gradient(180deg, #F8F9FB 0%, #F1F2F4 100%);
border: 1px solid var(--grayscale-400);
box-sizing: border-box;
border-radius: 3px;
width: 200px;
left: 2px;
cursor: pointer;
padding: 24px 12px;
font-size: 16px;
appearance: none;
}
.wrapper select:focus {
outline: unset;
}
.wrapper select > option:first-child {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="wrapper">
<select>
<option>Choice Label First</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>
</div>
On IE8,9 and 10 a select element looks like the attached picture. The drop down arrow is replaced with something that looks more or less like a mouse.
On Firefox and Chrome it looks like a standard drop down with a down arrow.
I can't find anywhere that I've done anything with CSS to alter selects.
Any suggestions?
<td>
<select id='allocated' name='alloc' onchange='allocChange()'>
<option value='??' selected='selected'>??</option>
<option value='1A' >1A</option>
<option value='1B' >1B</option>
<option value='1C' >1C</option>
<option value='2A' >2A</option>
<option value='2B' >2B</option>
<option value='3A' >3A</option>
</select>
</td>
CSS not a factor - same thing happens even when stylesheet not loaded
It may be by default.. But you can change the arrow using css
.styleSelect select {
background: transparent;
width: 168px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #000;
}
.styleSelect {
width: 140px;
height: 34px;
overflow: hidden;
background: url("images/downArrow.png") no-repeat right #fff;
border: 2px solid #000;
}