I have a dropdown with a transparent background. It works fine in Chrome but in Safari the select has this grey gradient background.
This is my CSS:
div.controls {
div.wrapper {
select {
background: transparent;
border: none;
color: blue;
width: 100px;
text-overflow: ellipsis;
option {
width: 200px;
}
}
}
}
How can I fix this?
You can disable the default appearance of the select-element by using:
-webkit-appearance: none;
Alternatively you can use all:
all: unset;
Example:
.a {
-webkit-appearance: none;
background: transparent;
border: none;
color: blue;
width: 100px;
}
.b {
all: unset;
}
<select>
<option>Default</option>
</select>
<select class="a">
<option>Appearance</option>
</select>
<select class="b">
<option>All</option>
</select>
Related
I have a select field in my form and I want to style the field arrow. I want to add a color background to the arrow (not for all fields) and change the position.
The arrow is located in the end of field now. I've tried to add css to the field but it doesn't work
I've tried the following:
.wpcf7-select:after {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 25px;
border: 1px solid #565656;
background: #0e7b53;
color: #fff;
padding: 11px 15px;
pointer-events: none;
}
input,
select {
height: 62px;
width: 100%;
background: #20232C;
border: none;
padding-right: 0px;
padding-left: 30px;
color: #fff;
}
.wpcf7-form-control-wrap {
position: relative;
}
span {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
<span class="wpcf7-form-control-wrap" data-name="menu-173">
<select name="menu-173" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="test">test</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</span>
This thread details how to hide the default arrow on most browsers (not IE9 and below though), and add your own stylable arrow.
Snippet from linked thread.
Please read the thread to understand what this code entails.
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
#media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
I'm trying to do some basic styling in an html range input with the follow:
HTML
<input type="range" min="0" value="50" max="100" step="1" />
CSS
input[type=range]::-webkit-slider-thumb {
-webkit-appearance : none;
background : red;
height : 20px;
width : 20px;
}
I also made a Codepen you can look at.
You'll notice that if you comment out the background, height and width styles the thumb does dissapear. So something is working. But with the styles applied I'd expect it to be a 20px X 20px red square. But alas, I just see the default thumb styling.
Please check with the below answer
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type=range] {
/* fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 300px;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring {
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]:focus::-moz-range-track {
background: #ccc;
}
/* for ie */
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
<input type="range" min="0" value="50" max="100" step="1" />
If you are able to edit the track, but NOT the thumb, then be sure that you have -webkit-appearance: none; in these two places to override default behavior.
input[type=range] {
-webkit-appearance: none; <------------------------------------ REQUIRED
}
input[type=range]::-webkit-slider-runnable-track {
background: /* ...change color with background property... */;
/* ...my custom edits...*/
}
input[type=range]:hover::-webkit-slider-runnable-track {
background: /* ...change color with background property... */;
/* ...my custom edits... */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; <------------------------------------ REQUIRED
height: /* ..manually set height greater than 0... */ <-------- REQUIRED
width: /* ..manually set width greater than 0... */ <---------- REQUIRED
background: /* ...change color with background property... */;
/* ...my custom edits... */
}
input[type=range]:hover::-webkit-slider-thumb {
background: /* ...change color with background property... */;
/* ...my custom edits... */
}
(Note that this works in Chrome, but you can comma separate other properties like input[type=range]::-moz-range-thumb and input[type=range]::-ms-thumb as needed to account for other browsers)
It would seem the following selector is causing the issue and your styles aren't working because of that, please remove it and the styles will apply:
::-webkit-slider-thumb
Here is an updated Codepen.
Updated Answer
Several styles need to be applied to range inputs in all browsers to override their basic appearance. After declaring the below styles you will be able to style the range toggler.
Please see the below and add it to your code:
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
Please see this link to the updated Codepen.
So the issue why the styles didn't get applied to the thumb is that you also have to add
input[type=range] {
-webkit-appearance: none;
}
.. The thumb is now a red square.
Hide the input - this hides thumb and track
Style the thumb as you'd like
Style the track
caveat: the track aligns with the top of the thumb. I used a negative margin to correct this. If someone has a better way of doing this that would be nice...
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: red;
height: 20px;
width: 20px;
margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
}
<input type="range" min="0" value="50" max="100" step="1" />
CODEPEN
Good resource here for ensuring browser compatibility.
i am creating vertical range bar and i changed the -webkit-appearance : slider-vertical.
I also changed the input-range bar's properties such as height , width ,webkit-slider-runnable-track and webkit-slider-thumb properties.
all the input range properties changed except the webkit-slider-thumb. It was set to the default property. I even changed the webkit-appearance to none inside the webkit-slider-thumb.
online code: Jsfiddle
<head>
<style type="text/css">
input[type=range][orient=vertical] {
-webkit-appearance: none;
-webkit-appearance: slider-vertical;/*if we remove this slider-vertical then horizondally range bar styles applies correctly*/
width: 10%;
height: 40%;
}
input[type=range][orient=vertical]::-webkit-slider-runnable-track {
background: yellow;
border: 1px solid black;
}
input[type=range]::-webkit-slider-thumb {
/*all the below css properties **not** applies to thumb*/
height: 3vmin;
width: 3vmin;
border-radius: 50%;
background-color : black;
}
</style>
</head>
<body>
<input type="range" orient="vertical">
</body>
I afraid it's not possible. See [Google chrome vertical <input type="range" /> ] for more info.
But there is a nice trick. https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/#comment-1586472
input[type=range][orient=vertical] {
-webkit-appearance: none;
/*-webkit-appearance: slider-vertical; /*if we remove this slider-vertical then horizondally range bar styles applies correctly*/
width: 10%;
height: 40%;
transform: translateY(30px) rotate(90deg);
transform-origin:bottom;
}
input[type=range][orient=vertical]::-webkit-slider-runnable-track {
background: yellow;
border: 1px solid black;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
<input type="range" orient="vertical" />
How can I change the border-color of my outer div #refdocs_main while also changing the bottom border color of my div #refdocs_container? Right now, only the outer container's border is colored on hover; how can I get both effects using CSS simultaneously?
Here is a fiddle: http://jsfiddle.net/Nb8cC/
And what I've tried so far:
HTML
<body>
<div id="refdocs_main">
<div id="refdocs_container"><input type="text" id="refdocs">
</div>
<div id="refdocs_wrapper">
<div id="refdocs_list">
<ul></ul>
</div>
</div>
</div>
</body>
CSS
#refdocs {
border: 0;
width: 100%;
height: auto;
padding-left: 2px;
}
#refdocs_main {
border: 1px solid rgb(170,170,170);
width: 179px;
overflow: hidden;
margin-top: 2px;
}
#refdocs_main:hover {
border-color: rgb(128,128,128);
}
#refdocs_container {
border-bottom: 1px solid rgb(170,170,170);
height: 20px;
}
#refdocs_wrapper{
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
}
#refdocs_list {
width: 100%;
}
#refdocs_list ul {
margin: 0;
padding: 0px;
list-style-type: none;
}
#refdocs_list li {
cursor: default;
padding: 2px;
}
Use:
#refdocs_main:hover, #refdocs_main:hover #refdocs_container {
border-color: rgb(128, 128, 128);
}
By adding #refdocs_main:hover #refdocs_container you enable the border on #refdocs_container to change only when #refdocs_main is being hovered.
jsFiddle example
Add:
#refdocs_main:hover #refdocs_container {
border-bottom: 1px solid red;
}
to your css stylesheet.
This reads when #refdocs_main is hovered over then for the #refdocs_container element apply the following changes.
I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML:
<select name="">
<option value="">Test</option>
</select>
And it doesn't work. I don't know why and I didn't find the answer in the W3C specs. Here's the CSS:
select {
-webkit-appearance: none;
background: black;
border: none;
border-radius: 0;
color: white;
}
select:after {
content: " ";
display: inline-block;
width: 24px; height: 24px;
background: blue;
}
So is it normal or is there a trick?
I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which select elements are generated by the OS on which the browser runs, rather than the browser itself.
I was looking for the same thing since the background of my select is the same as the arrow color. As previously mentioned, it is impossible yet to add anything using :before or :after on a select element. My solution was to create a wrapper element on which I added the following :before code.
.select-wrapper {
position: relative;
}
.select-wrapper:before {
content: '\f0d7';
font-family: FontAwesome;
color: #fff;
display: inline-block;
position: absolute;
right: 20px;
top: 15px;
pointer-events: none;
}
And this my select
select {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 10px 20px;
background: #000;
color: #fff;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
I have used FontAwesome.io for my new arrow, but you can use whatever else you want. Obviously this is not a perfect solution, but depending on your needs it might be enough.
To my experience it simply does not work, unless you are willing to wrap your <select> in some wrapper. But what you can do instead is to use background image SVG. E.g.
.archive .options select.opt {
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 1.25EM;
appearance: none;
position: relative;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.5EM 1EM;
background-position: right center;
background-clip: border-box;
-moz-background-clip: border-box;
-webkit-background-clip: border-box;
}
.archive .options select.opt::-ms-expand {
display: none;
}
Just be careful with proper URL-encoding because of IE. You must use charset=utf8 (not just utf8), don't use double-quotes (") to delimit SVG attribute values, use apostrophes (') instead to simplify your life. URL-encode s (%3E). In case you havee to print any non-ASCII characters you have to obtain their UTF-8 representation (e.g. BabelMap can help you with that) and then provide that representation in URL-encoded form - e.g. for ▾ (U+25BE BLACK DOWN-POINTING SMALL TRIANGLE) UTF-8 representation is \xE2\x96\xBE which is %E2%96%BE when URL-encoded.
What if modifying the markup isn't an option?
Here's a solution that has no requirements for a wrapper: it uses an SVG in a background-image.
You may need to use an HTML entity decoder to understand how to change the fill colour.
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;
Pinched from CSS-Tricks.
Faced the same problem. Probably it could be a solution:
<select id="select-1">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<label for="select-1"></label>
#select-1 {
...
}
#select-1 + label:after {
...
}
This post may help http://bavotasan.com/2011/style-select-box-using-only-css/
He is using a outside div with a class for resolving this issue.
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
This solution is similar to the one from sroy, but with css triangle instead of web font:
.select-wrapper {
position: relative;
width: 200px;
}
.select-wrapper:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #666;
position: absolute;
right: 8px;
top: 8px;
pointer-events: none;
}
select {
background: #eee;
border: 0 !important;
border-radius: 0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
text-indent: 0.01px;
text-overflow: "";
font-size: inherit;
line-height: inherit;
width: 100%;
}
select::-ms-expand {
display: none;
}
<div class="select-wrapper">
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
This is a modern solution I cooked up using font-awesome. Vendor extensions have been omitted for brevity.
HTML
<fieldset>
<label for="color">Select Color</label>
<div class="select-wrapper">
<select id="color">
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
</fieldset>
SCSS
fieldset {
.select-wrapper {
position: relative;
select {
appearance: none;
position: relative;
z-index: 1;
background: transparent;
+ i {
position: absolute;
top: 40%;
right: 15px;
}
}
}
If your select element has a defined background color, then this won't work as this snippet essentially places the Chevron icon behind the select element (to allow clicking on top of the icon to still initiate the select action).
However, you can style the select-wrapper to the same size as the select element and style its background to achieve the same effect.
Check out my CodePen for a working demo that shows this bit of code on both a dark and light themed select box using a regular label and a "placeholder" label and other cleaned up styles such as borders and widths.
P.S. This is an answer I had posted to another, duplicate question earlier this year.
<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>
Insted of styling the select why dont you add a div out-side the select.
and style then in CSS
.select{
width: 100%;
height: 45px;
position: relative;
}
.select::after{
content: '\f0d7';
position: absolute;
top: 0px;
right: 10px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0b660b;
font-size: 45px;
z-index: 2;
}
#dropdown{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
height: 45px;
width: 100%;
outline: none;
border: none;
border-bottom: 2px solid #0b660b;
font-size: 20px;
background-color: #0b660b23;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
Instead of a wrapper element you can use CSS grid and place an icon (or whatever) in the same cell as the select:
.select-field {
display: grid;
grid-template:
"label"
"select"
/ max-content;
}
.label {
grid-area: label;
}
.select {
appearance: none;
background: white;
border: 1px solid var(--border-color);
grid-area: select;
padding-block: 0.5ex;
padding-inline: 1ch calc(1ch + 1em);
}
.after {
align-self: center;
border-block-start: 0.5em solid var(--border-color);
border-inline: 0.5em solid transparent;
block-size: 0;
grid-area: select;
inline-size: 0;
justify-self: end;
margin-inline-end: 1ch;
pointer-events: none;
}
.select,
.select + .after {
--border-color: silver;
}
.select:hover,
.select:hover + .after {
--border-color: grey;
}
.select:focus,
.select:focus + .after {
--border-color: rebeccapurple;
}
<div class="select-field">
<label for="my-select" class="label">Select One</label>
<select id="my-select" class="select">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
<div class="after"></div>
</div>
Here I used an empty div to and styled it to be a CSS triangle which has the same color as the border which changes during hover/focus.
The most important bits here are the following:
The <select> and the <div class="after"> go into the same grid-area (which I named select). This will put the empty div over the select.
Give the <select> an appearance of none. This will remove any browser default style.
Give the <select> and extra padding at the end of the inline direction to make room for the empty style.
Justify the empty div to the end.
Give the empty div an extra margin at the end of the inline direction which matches your desired padding of the <select>
Give the empty div a pointer-events of none so the click will go through it to the <select> element.
Other then that you can do whatever with the empty div. It doesn’t even have to be empty. E.g. you can put an svg icon in there if you want.
If you chose to use the select::after method, remember that:
.select::after{
...
pointer-events: none;
...
for clickable..