css style select arrow color
.select_box{
width: 200px;
overflow: hidden;
border: 1px solid #000;
position: relative;
padding: 10px 0;
}
.select_box:after{
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #f00;
position: absolute;
top: 40%;
right: 5px;
content: "";
z-index: 98;
}
.select_box select{
width: 220px;
border: 0;
position: relative;
z-index: 99;
background: none;
}how to change the select arrow in css
.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(images/downarrow_blue.png) no-repeat right white;
border: 2px double red;
display: inline-block;
position: relative;
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}
body {
background-color: #333333;
color: #FFFFFF;
}
.block label {
color: white;
}change color select arrow css cf7
body {
background: #f2f2f2;
}
.selectdiv {
position: relative;
/*Don't really need this just for demo styling*/
float: left;
min-width: 200px;
margin: 50px 33%;
}
/*To remove button from IE11, thank you Matt */
select::-ms-expand {
display: none;
}
.selectdiv:after {
content: '<>';
font: 17px "Consolas", monospace;
color: #333;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 11px;
/*Adjust for position however you want*/
top: 18px;
padding: 0 0 2px;
border-bottom: 1px solid #999;
/*left line */
position: absolute;
pointer-events: none;
}
.selectdiv select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */
display: block;
width: 100%;
max-width: 320px;
height: 50px;
float: right;
margin: 5px 0px;
padding: 0px 24px;
font-size: 16px;
line-height: 1.75;
color: #333;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
-ms-word-break: normal;
word-break: normal;
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
