I want to remove the default arrow from the select box and want to use custom icon. From the previous answers on SO, I have found out that it is not possible (to make it work with major browsers). Only possibility is to wrap the select inside a div, and set its width more than the div width and setting overflow: hidden.
I am trying following, but it does not work. What I'm doing wrong?
.selectParent {
width: 80px;
overflow: hidden;
}
.selectParent select {
width: 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
JSFiddle:
http://jsfiddle.net/gcPmC/
Please follow the way like below:
.selectParent {
width:120px;
overflow:hidden;
}
.selectParent select {
display: block;
width: 100%;
padding: 2px 25px 2px 2px;
border: none;
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right center no-repeat;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.selectParent.left select {
direction: rtl;
padding: 2px 2px 2px 25px;
background-position: left center;
}
/* for IE and Edge */
select::-ms-expand {
display: none;
}
<div class="selectParent">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<br />
<div class="selectParent left">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Try to replace the
padding: 2px 30px 2px 2px;
with
padding: 2px 2px 2px 2px;
It should work.
Related
I want to change this black arrow inside a selector from the initial position. How would you do that with CSS?
.form-control-countrySelector {
height: 40px;
width: 421px;
left: 0px;
right: 0px;
top: 30px;
/* white */
background: #FFFFFF;
border: 1px solid rgba(60, 66, 87, 0.12);
box-sizing: border-box;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.04);
border-radius: 8px 8px 0px 0px;
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
letter-spacing: 0.005em;
font-feature-settings: 'pnum' on, 'lnum' on;
color: #1A1F36;
padding: 9px;
margin-left: 110px;
}
<div>
<select className="form-control-countrySelector">
<option>United States</option>
</select>
<input type="text" className="form-control-countryZIP" id="cardNumber" placeholder="ZIP" />
</div>
if you want to hide arrow than add appearance: none; attribute in Select
select
{
width:100px;
appearance: none;
}
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
if you want add arrow before the option than
Add background image :
select{
width:100px;
appearance: none;
padding:5px 2px 2px 30px;
border: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat left center;
}
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
You can use clip-path property to draw your arrow and move it anywhere you want with display: grid and justify-self properties.
For example, you can put it in center.
.select {
display: grid;
grid-template-areas: "select";
align-items: center;
width:50%;
}
.select::after {
content: "";
width: 0.8em;
height: 0.5em;
background-color: #1b1b1b;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
justify-self: center;
margin-right:5px;
}
select {
/* A reset of styles, including removing the default dropdown arrow */
appearance: none;
/* Additional resets for further consistency */
background-color: transparent;
padding: 0 1em 0 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
}
select,
.select:after {
grid-area: select;
}
<label for="standard-select">Select You Option</label>
<div class="select">
<select id="standard-select">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
<option value="Option length">
Option that has too long of a value to fit
</option>
</select>
Or put it in left side
.select {
display: grid;
grid-template-areas: "select";
align-items: center;
width:30%;
}
.select::after {
content: "";
width: 0.8em;
height: 0.5em;
background-color: #1b1b1b;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
justify-self: start;
margin-left:5px;
}
select {
/*A reset of styles, including removing the default dropdown arrow*/
appearance: none;
/* Additional resets for further consistency */
background-color: transparent;
padding: 0 1em 0 1.2rem;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
}
select,
.select:after {
grid-area: select;
}
<label for="standard-select">Select Your Option</label>
<div class="select">
<select id="standard-select">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
<option value="Option length">
Option that has too long of a value to fit
</option>
</select>
</div>
For more information, you can read Custom Select Styles with Pure CSS and Awesome CSS Select Styles You Can Use Right Now articles.
I'm trying to change the background color on hover in select, I tried many ways and It wont change.Really appreciate If you can help,
.selector {
background-color: #252525;
color: #fff;
border: none;
border: 1px solid #595E57;
padding: 5px;
width: 150px;
}
.selector option:hover{
background-color: #1BA1E2 !important;
}
<select name="" class="selector">
<option value="">Select</option>
<option value="">Select</option>
</select>
.selector {
background-color: #252525;
color: #fff;
border: none;
border: 1px solid #595E57;
padding: 5px;
width: 150px;
overflow:hidden;
}
.selector option{
padding:5px;
}
.selector option:hover{
background-color: #1BA1E2 !important;
}
<select onfocus='this.size=10;' onchange='this.size=1; this.blur();' name="" class="selector">
<option value="">Select1</option>
<option value="">Select2</option>
<option value="">Select3</option>
<option value="">Select4</option>
</select>
Form elements are rendered by the OS and not the browser, so the CSS isn't always (or even 'is rarely') applied. There are ways to change the highlight color in Firefox, by adding a box-shadow to the CSS for option:hover, but this is browser-specific.
Try something like box-shadow: 0 0 10px 10px #1BA1E2 inset;
At the end it's not worth it. Think on mobile first. On iOS the options will be rendered in a very own way anyway. There are no colors.
I got a question regarding browser zoom and my select box. I have created a custom select box with the current HTML and CSS code (JSFIDDLE):
.custom-select {
position: relative;
width: 100px;
display: inline-block;
}
.custom-select select {
width: 100%;
padding: 8px 5px 8px 10px;
height: 36px;
border: 1px solid #cacaca;
color: #0085c8;
}
.custom-select.svg > svg.dropdown-button {
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
background-color: #fff;
background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
border: 1px solid #cacaca;
color: #0085c8;
display: inline-block;
}
<div class="custom-select svg">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
<svg class="dropdown-button"></svg>
</div>
Whenever you scale down your browser to for example 75% I get the following situation:
Where the word POLO is cutoff. What am I doing wrong? This should not be zooming sensitive right? Can you set CSS styling to specific zoom levels?
--EDIT
Increasing the width is not an option due to the fact that the select is been placed inside a div with a maximum width of 150px
You can try with giving auto width to your custom select box.
.custom-select
{
position: relative;
width:100px;
display:inline-block;
overflow:hidden
}
.custom-select select{
width:auto;
padding: 8px 5px 8px 10px;
height:36px;
border: 1px solid #cacaca;
color: #0085c8;
}
.custom-select.svg > svg.dropdown-button
{
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
background-color: #fff;
background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
background-repeat:no-repeat;
background-position:center;
pointer-events: none;
border: 1px solid #cacaca;
color: #0085c8;
display:inline-block;
}
<div class="custom-select svg">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
<svg class="dropdown-button"></svg>
</div>
I'm trying to get my dropdown button to look like this one:
https://www.progressive.com/auto/
And can't workout how to get the arrow looking like that on the form field. Can anyone help or suggest where to start?
Just to confirm I am only looking for the button itself, not what happens after it is clicked.
jsfiddle:
https://jsfiddle.net/6e4px6La/1/
<label class="select-label">
<select id="Type" class="size-select" name="customer_type">
<option value="" disabled selected>Please Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</label>
CSS:
select {
background-color: #fff;
border-color: #979797;
border-style: solid;
border-width: 1px;
width: 250px;
margin-left: 10px;
height: 50px;
}
Thanks in advance!
You need to add the following code to your CSS
.selectParent select {
border-color: #979797;
border-style: solid;
border-width: 1px;
width: 250px;
margin-left: 10px;
height: 50px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("IMAGE_URL") no-repeat 235px center #fff;
}
Replace the IMAGE_URL with the source of the image you want to put as the dropdown arrow.
Here is the JSFiddle with an example for the same
How to get the select dropdown arrow styled like shown in the image below.
<select>
<option>Select Any</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Try this:
HTML:
<div class="styled-select slate">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>
CSS:
div { margin: 20px; }
.styled-select {
height: 29px;
overflow: hidden;
width: 240px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 14px;
height: 29px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 268px;
}
.styled-select.slate {
background: url(http://i.stack.imgur.com/8CVVr.png) no-repeat right center;
height: 34px;
width: 240px;
}
How about this... Just set that image to Select's background.
.select-style {
width: 268px;
line-height: 1;
border: 0;
overflow: hidden;
height: 34px;
position:relative;
background:#fff;
}
.select-style>select{
-webkit-appearance: none;
appearance:none;
-moz-appearance:none;
width:100%;
background:none;
background:transparent;
border:none;
outline:none;
cursor:pointer;
padding:7px 10px;
}
.select-style>span{
position:absolute;
bottom: 0;
right: 0;
height: 0;
width: 0;
cursor:pointer;
border-right: 10px solid #ff0099;
border-bottom: 10px solid #ff0099;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
}
select::-ms-expand {
display: none;
}
<div class="select-style">
<select>
<option>Select Any</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<span></span>
</div>
Fiddle: https://jsfiddle.net/sank8893/bhy9do60/9/
As others have mentioned you can hide the default select arrow by appearance property and apply your own style.
To support lower versions of IE(i haven't consider below 9) as appearance property won't work even with ms prefix , you can use the below method to have common support.
Arrow made by css not an image.
$( "#sel_val" ).change(function() {
var option = $(this).find('option:selected').val();
$('#sel_txt').text(option);
});
.wrapper{width:250px;margin:10px auto;}
.sbx{
margin:0;
width:100%;
font-family:arial;
position:relative;
background-color:#eee;
}
.cus_selt:after{content:'';width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #FD025F;
position:absolute;
bottom:-1px;
z-index:2;
right:-6px;
transform:rotate(-45deg);
}
.cus_selt{padding:20px;display:block;}
.styled {
float:left;
height: 56px;
margin: -58px 0 0;
opacity: 0;
width: 100%;
filter: alpha(opacity=0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="sbx" id="yoe_fld">
<span class="cus_selt" id="sel_txt">Select a value*</span>
<select id="sel_val" class="styled">
<option>Select</option>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
<option>option7</option>
</select>
</div>
</div>
Source link for custom select dropdown click
Source link for CSS arrow click
see here jsfiddle
first you need to remove the default styling of the select dropdown. to do that use
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
for IE use :
select::-ms-expand {
display: none;
}
then just apply your desired style, in this case with background-image
or you can use border to make a triangle and place it by using pseudo-elements like :before or :after .
select {
background:url("http://i.stack.imgur.com/8CVVr.png") no-repeat scroll right bottom;
background-size:contain;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding:5px 10px;
}