Change Select Arrow Color Css Code Example


Example 1: change select arrow css

select {     width: 268px;     padding: 5px;     font-size: 16px;     line-height: 1;     border: 0;     border-radius: 5px;     height: 34px;     background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;     -webkit-appearance: none;     background-position-x: 244px; }

Example 2: 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; }

Example 3: 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; }

Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?