SyntaxFix

[css] Select arrow style change

I'm trying to replace the arrow of a select with a picture of my own. I'm including the select in a div with the same size, I set the background of the select as transparent and I'm including a picture(with the same size as the arrow) in the right top corner of the div as background.

It only works in Chrome.

enter image description here

How can I make it work in Firefox and IE9 where I'm getting this:

enter image description here

_x000D_
_x000D_ 
.styled-select {_x000D_
  width: 100px;_x000D_
  height: 17px;_x000D_
  overflow: hidden;_x000D_
  overflow: -moz-hidden-unscrollable;_x000D_
  background: url(images/downarrow_blue.png) no-repeat right white;_x000D_
  border: 2px double red;_x000D_
  display: inline-block;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.styled-select select {_x000D_
  background: transparent;_x000D_
  -webkit-appearance: none;_x000D_
  width: 100px;_x000D_
  font-size: 11px;_x000D_
  border: 0;_x000D_
  height: 17px;_x000D_
  position: absolute;_x000D_
  left: 0;_x000D_
  top: 0;_x000D_
}_x000D_
_x000D_
body {_x000D_
  background-color: #333333;_x000D_
  color: #FFFFFF;_x000D_
}_x000D_
_x000D_
.block label {_x000D_
  color: white;_x000D_
}
_x000D_ 
<HTML>_x000D_
_x000D_
<HEAD>_x000D_
</HEAD>_x000D_
_x000D_
<BODY>_x000D_
  <p/>_x000D_
  <form action="/prepareUpdateCategoryList.do?forwardto=search">_x000D_
_x000D_
    <fieldset class="block" id="searchBlock">_x000D_
      <p>_x000D_
        <label style="width:80px">Class</label>_x000D_
        <div class="styled-select">_x000D_
          <select property="voucherCategoryClass">_x000D_
      <option value="0">Select </option>_x000D_
      <option value="7382">steam </option>_x000D_
     </select>_x000D_
        </div>_x000D_
_x000D_
      </p>_x000D_
    </fieldset>_x000D_
  </form>_x000D_
</BODY>_x000D_
_x000D_
</HTML>
_x000D_
_x000D_
_x000D_

This question is related to css select

The answer is

It's working in all browser:

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;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    background-position-x: 244px;

}

just do this:

_x000D_
_x000D_ 
select {

    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==) !important;
    background-repeat: no-repeat !important;
    background-position-x: 100% !important;
    background-position-y: 50% !important;
    
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
}
select::-ms-expand {
    display: none;
}
_x000D_
_x000D_
_x000D_

You can also try this:

Heres a Picture of it!

And also run code snippet!

CSS and then HTML:

_x000D_
_x000D_ 
           #select-category {
            font-size: 100%;
            padding: 10px;
            padding-right: 180px;
            margin-left: 30px;
            border-radius: 1000000px;
            border: 1px solid #707070;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: transparent;
            background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='34' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
            background-repeat: no-repeat;
            background-position-x: 100%;
            background-position-y: 5px;
            margin-right: 2rem;
        }
_x000D_ 
                <select id="select-category">
                    <option>Category</option>
                    <option>Category 2</option>
                    <option>Category 3</option>
                    <option>Category 4</option>
                    <option>Category 5</option>
                    <option>Category 6</option>
                    <option>Category 7</option>
                    <option>Category 8</option>
                    <option>Category 9</option>
                    <option>Category 10</option>
                    <option>Category 11</option>
                    <option>Category 12</option>
                </select>
_x000D_
_x000D_
_x000D_

Simple arrow and clean code

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat 100% center;
    padding-right: 25px;
}

Style the label with CSS and use pointer events :

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

and the relative CSS is

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

I just used a down arrow here, but you can set a block with a background image. Here is a ugly fiddle sample: https://jsfiddle.net/1rofzz89/

Check this one It's hacky, simple as that:

  • Set -prefix-appearance to none to remove the styles
  • Use text-indent to "push" the content a bit to the right
  • Finally, set text-overflow to an empty string. Everything that extends beyond it's width will become... nothing! And that includes the arrow.

Now you're free to style it any way you want :)

_x000D_
_x000D_ 
.selectParent {_x000D_
  width: 80px;_x000D_
  overflow: hidden;_x000D_
}_x000D_
_x000D_
.selectParent select {_x000D_
  text-indent: 1px;_x000D_
  text-overflow: '';_x000D_
  width: 100px;_x000D_
  -webkit-appearance: none;_x000D_
  -moz-appearance: none;_x000D_
  appearance: none;_x000D_
  padding: 2px 2px 2px 2px;_x000D_
  border: none;_x000D_
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 60px center;_x000D_
}
_x000D_ 
<div class="selectParent">_x000D_
  <select>_x000D_
    <option value="1">Option 1</option>_x000D_
    <option value="2">Option 2</option>_x000D_
  </select>_x000D_
</div>
_x000D_
_x000D_
_x000D_

View on JSFiddle

I wanna clear something that no one mention before I think.

  1. First get your svg image or icon
  2. There you will get some xml code like these <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 10.127L12 18.127L20 10.127H4Z" fill="#8E8E93"/> </svg> try to find it.
  3. And past it after this code data:image/svg+xml;utf8,
  4. Replace the fill color fill="#8E8E93" to this fill="%238E8E93" If you want to add hexadecmal color you should change # to %23

Here is the html code:

              <fieldset>
                <label for="editName">Country</label>
                    <select class="ra-select">
                      <option value="bangladesh" selected>Bangladesh</option>
                      <option value="saudi arabia">Saudi Arabia</option>
                      <option value="us">Uinited State Of America</option>
                      <option value="india">India</option>
                    </select>
                </fieldset>

Here is the css code:

.ra-select {
   width: 30%;
   padding: 10px;
   /* Replace Default styling (arrow) */
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url('data:image/svg+xml;utf8,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 10.127L12 18.127L20 10.127H4Z" fill="%238E8E93"/></svg>');
   background-repeat: no-repeat;
   background-position-y: 50%;
   background-position-x: 98%;
}

.ra-select:focus,
.ra-select:hover {
   outline: none;
   border: 1px solid #bbb;
}

.ra-select option {
   background-color: #fff;
}

Here is an elegant fix that uses a span to show the value.

Layout is like this:

<div class="selectDiv">
   <span class="selectDefault"></span>
   <select name="txtCountry" class="selectBox">
      <option class="defualt-text">-- Select Country --</option>
      <option value="1">Abkhazia</option>
      <option value="2">Afghanistan</option>
   </select>
</div>

JsFiddle

There are a few examples here

It's based off this answer, but I added one to the list to make a design that is even more minimal

select.moreMinimal {

    background-color: inherit;
    display: inline-block;
    font: inherit;
    padding: 0 2.2em 0 1em;    
    margin: 0;      
    cursor: pointer;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

select.moreMinimal {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%);
    background-position:
      calc(100% - 20px), 
      calc(100% - 15px);
    background-size:
      5px 5px,
      5px 5px;
    background-repeat: no-repeat;
}
  
//TODO: Probably shouldn't be focus, cause when you click it again it's still green
select.moreMinimal:focus {
    background-image:
        linear-gradient(45deg, green 50%, transparent 50%),
        linear-gradient(135deg, transparent 50%, green 50%);
    background-position:
        calc(100% - 15px),
        calc(100% - 20px);
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
    border-color: green;
    outline: 0;
}

You can use this. Its Tested code

    select {
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right !important;
    appearance: none !important;
    background-size: 25px 25px !important;
    background-position: 99% 50% !important;
}

I have set up a select with a custom arrow similar to Julio's answer, however it doesn't have a set width and uses an svg as a background image. (arrow_drop_down from material-ui icons)

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}

enter image description here

If you need it to also work in IE update the svg arrow to base64 and add the following:

select::-ms-expand { display: none; }

background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);

To make it easier to size and space the arrow, use this svg:

url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");

It doesn't have any spacing on the arrow's sides.

I have referred this post, it worked like charm , except it did not hide the arrow in IE browser.

However adding following hides the arrow in IE:

_x000D_
_x000D_ 
&::-ms-expand {_x000D_
      display: none;_x000D_
    }
_x000D_
_x000D_
_x000D_

Complete solution ( sass )

_x000D_
_x000D_ 
$select-border-color: #ccc;_x000D_
$select-focus-color: green;_x000D_
_x000D_
select {_x000D_
_x000D_
    cursor: pointer;_x000D_
    /* styling */_x000D_
    background-color: white;_x000D_
    border: 1px solid $select-border-color;_x000D_
    border-radius: 4px;_x000D_
    display: inline-block;_x000D_
    font: inherit;_x000D_
    line-height: 1.5em;_x000D_
    padding: 0.5em 3.5em 0.5em 1em;_x000D_
_x000D_
    /* reset */_x000D_
    margin: 0;_x000D_
    -webkit-box-sizing: border-box;_x000D_
    -moz-box-sizing: border-box;_x000D_
    box-sizing: border-box;_x000D_
    -webkit-appearance: none;_x000D_
    -moz-appearance: none;_x000D_
_x000D_
    background-image: linear-gradient(45deg, transparent 50%, $select-border-color 50%),_x000D_
    linear-gradient(135deg, $select-border-color 50%, transparent 50%),_x000D_
    linear-gradient(to right, $select-border-color, $select-border-color);_x000D_
    background-position: calc(100% - 20px) calc(1em + 2px),_x000D_
    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;_x000D_
    background-size: 5px 5px, 5px 5px, 1px 1.5em;_x000D_
    background-repeat: no-repeat;_x000D_
_x000D_
    /* Very imp: hide arrow in IE */_x000D_
    &::-ms-expand {_x000D_
      display: none;_x000D_
    }_x000D_
_x000D_
    &:-moz-focusring {_x000D_
      color: transparent;_x000D_
      text-shadow: none;_x000D_
    }_x000D_
_x000D_
    &:focus {_x000D_
      background-image: linear-gradient(45deg, $select-focus-color 50%, transparent 50%),_x000D_
      linear-gradient(135deg, transparent 50%, $select-focus-color 50%), linear-gradient(to right, $select-focus-color, $select-focus-color);_x000D_
      background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;_x000D_
      background-size: 5px 5px, 5px 5px, 1px 1.5em;_x000D_
      background-repeat: no-repeat;_x000D_
      border-color: $select-focus-color;_x000D_
      outline: 0;_x000D_
    }_x000D_
  }
_x000D_
_x000D_
_x000D_

Working with just one class:

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;
}

http://jsfiddle.net/qhCsJ/4120/

Assume, selectDrop is the class present in your HTML tag.So, this much of code is enough to change default arrow icon:

.selectDrop{
      background: url(../images/icn-down-arrow-light.png) no-repeat right #ddd; /*To change default icon with provided image*/
      -webkit-appearance:none; /*For hiding default pointer of drop-down on Chrome*/
      -moz-appearance:none; /*For hiding default pointer of drop-down on Mozilla*/
      background-position-x: 90%; /*Adjust according to width of dropdown*/
    }

This would work well especially for those using Bootstrap, tested in latest browser versions:

_x000D_
_x000D_ 
select {_x000D_
  -webkit-appearance: none;_x000D_
  -moz-appearance: none;_x000D_
  appearance: none;_x000D_
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ _x000D_
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */_x000D_
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */_x000D_
}_x000D_
/*For IE*/_x000D_
select::-ms-expand { display: none; }
_x000D_ 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="container">_x000D_
  <div class="row">_x000D_
    <div class="col-xs-6">_x000D_
      <select class="form-control">_x000D_
       <option>Option 1</option>_x000D_
       <option>Option 2</option>_x000D_
       <option>Option 3</option>_x000D_
      </select>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Source: Stackoverflow.com

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width

Examples related to select

• Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option> • SQL query to check if a name begins and ends with a vowel • Angular2 *ngFor in select list, set active based on string from object • SQL: Two select statements in one query • How to get selected value of a dropdown menu in ReactJS • DATEDIFF function in Oracle • How to filter an array of objects based on values in an inner array with jq? • Select unique values with 'select' function in 'dplyr' library • how to set select element as readonly ('disabled' doesnt pass select value on server) • Trying to use INNER JOIN and GROUP BY SQL with SUM Function, Not Working

Tags

Mod-wsgi Google-toolbox-for-mac Spnego Shouldstartload Telerik-scheduler Hardware-programming Bioinformatics Perl-critic Ogr Modal-dialog Itemrenderer Variable-length Parameterization Xmlnode Subtraction Gpgpu Visual-studio-project Side-by-side Key-management Diskspace Session-cookies Hgserve Jspx Jenkins Xmlignore Google-groups-api Dynamics-sl Graph-drawing Dih Sendkeys Application-settings Facebooktoolkit Longest-prefix Nant Read-eval-print-loop Pony Machine-code Cg Information-theory Timeline Document-oriented Do-notation Buildpath Peoplesoft Timed-events Contact-list Restriction Systemcolors Rtm Ironspeed Pkg-resources Backcolor Page-fragments Private-members Qsettings Mtj Xgrid Qt Tdbgrid Sharepoint-branding Correlated Cleartool Superblock Preload Contravariance Rfc822 Unmanagedresources Compiler-theory Createwindowex Fso Android-wireless Erubis Rubymine Gridview Nokia Dynamic-reports Fastsearch Unittest2 Gcc3 Toarray Windows-share Prerender Zfdoctrine Mysqli Nsimagerep Embedded-container Acceleo Magic-function Parameter-passing Lisp Asp-classic Enumerators Custom-painting Training-data Embedded-media Astronomy Graphics2d Axapta Unit-conversion Static-code-analysis