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>
Little form on page with dropdown select option when I click dropdown on inspected device width 50% zoomed display like below how to full width ?
select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-color: transparent;
height: 45px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
background-position: 100%;
background-repeat: no-repeat;
border: 1px solid #ccc;
padding: 0.5rem;
border-radius: 0;
}
<span class="text-danger">*</span> Trading Platform</label>
<select class="form-control">
<option>Select a trading platform</option> <option>UTrade</option>
<option>MT4</option>
</select>
This question already has answers here:
How to remove border of drop down list : CSS
(4 answers)
Closed 2 years ago.
I want select without border before and after option selected.
I have tried below css code but unfortunately without success.
.custom-select{
font-family: Raleway;
font-size: 18px;
color: grey;
min-height: 75px;
width: 99%;
height: auto;
}
select{
min-width: 40px;
min-height: 40px;
width: 99%;
border: 0;
border-width: 0px;
box-shadow: 5px 5px 10px rgba(0, 40, 0, 0.5);
border-radius: 5px;
box-sizing: content-box;
}
select option:checked{
background-color: grey;
border-width: 0px;
box-sizing: content-box;
border: 0;
}
select:active{
background-color: grey;
border-width: 0px;
box-sizing: content-box;
border: 0;
}
<div class="cutom-select">
<select>
<option>India</option>
<option>India</option>
<option>India</option>
</select>
</div>
Please suggest me where am I doing mistake?
Thanx.
Here try this:
.cutom-select select:focus{
outline: none !important;
}
working example:
.custom-select{
font-family: Raleway;
font-size: 18px;
color: grey;
min-height: 75px;
width: 99%;
height: auto;
}
select{
min-width: 40px;
min-height: 40px;
width: 99%;
border: 0;
border-width: 0px;
box-shadow: 5px 5px 10px rgba(0, 40, 0, 0.5);
border-radius: 5px;
box-sizing: content-box;
}
select option:checked{
background-color: grey;
border-width: 0px;
box-sizing: content-box;
border: 0;
}
select:active{
background-color: grey;
border-width: 0px;
box-sizing: content-box;
border: 0;
}
.cutom-select select:focus{
outline: none !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="cutom-select">
<select>
<option>India</option>
<option>India</option>
<option>India</option>
</select>
</div>
set select:focus {outline: none;}
Note that that is not a border! it is an outline. To remove it you have to use outline: none;. To know more about outlines take a look here.
something like this
.custom-select{
font-family: Raleway;
font-size: 18px;
color: grey;
min-height: 75px;
width: 99%;
height: auto;
}
select{
min-width: 40px;
min-height: 40px;
width: 99%;
border: 0;
border-width: 0px;
box-shadow: 5px 5px 10px rgba(0, 40, 0, 0.5);
border-radius: 5px;
box-sizing: content-box;
outline: none; /* <-------[added line] (if it doesn't work like this adding !important) */
}
select option:checked{
background-color: grey;
border-width: 0px;
box-sizing: content-box;
border: 0;
}
select:active{
background-color: grey;
border-width: 0px;
box-sizing: content-box;
border: 0;
}
<div class="cutom-select">
<select>
<option>India</option>
<option>India</option>
<option>India</option>
</select>
</div>
Be careful! this code always removes the outline (also when the element is not focuses). To remove it only when focused you should use :focus.
Note that Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
In some browsers (like google chrome) outline is set as default, when selected, on some elements like select or button
Note also (from w3school) that outline has the following properties.
dotted - Defines a dotted outline dashed - Defines a dashed
outline solid - Defines a solid outline double - Defines a
double outline groove - Defines a 3D grooved outline ridge -
Defines a 3D ridged outline inset - Defines a 3D inset outline
outset - Defines a 3D outset outline none - Defines no outline
hidden - Defines a hidden outline
I am customizing select box by using css :after Attribute.
Html:
<div class="styled">
<select>
<option>India, Rupees (Rs.)</option>
<option>USA, Dollars ($) </option>
<option>United Kingdom, Pounds (£)</option>
</select>
</div>
css:
div.styled{
display: inline-block;
float: left;
position: relative;
border-right: 1px solid #CCC;
border-radius: 3px;
box-shadow: 1px 1px 1px #ddd;
}
.styled select option{
padding: 5px;
}
div.styled:after{
content: "";
background: #fff url("dn_arw.png") no-repeat 2px 4px;
display: inline-block;
float: left;
height: 18px;
position: absolute;
right: 8px;
top: 6px;
width: 15px;
}
The below is the image and js fiddle
http://jsfiddle.net/CtYnt/
The Problem is the area which is overlapped with "down arrow image" is not clickable
To make it work in Chrome, Firefox and Safari, you can use one line of CSS in the :after block:
pointer-events: none;
IE takes more work, the easiest way is to use conditional statement for IE on the :after block and set:
display:none;
Alternatively if your overlayed DIV MUST work in IE, there is a hack detailed here.
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..