CODEWITHSUNDEEP
javascripthtmlcssreactjssvg
Leo Messi
Leo Messi

Reputation: 6176

Replace dropdown's caret with SVG image

There is a dropdown, which is part of semantic-ui-react component which looks like this:

enter image description here

<Dropdown
  className="hello-dropdown"
  placeholder="Comapany"
  onChange={this.someFunction}
  options={someOptions}
/>

css:

div.hello-dropdown {
    background: linear-gradient(180deg, #FCFCFC 0%, #F5F6F7 100%) !important;
    border-radius: 4px !important;
    margin-right: 20px;
    border: 1px solid #e8e8e8 !important;
}

In inspect mode, if I select the caret it is shown like this:

<i aria-hidden="true" class="dropdown icon"></i>

Is it a way to modify the caret with a SVG image? This is the image I want to put in place https://svgur.com/s/Nmi

Upvotes: 0

Views: 2876

Answers (2)

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21173

Pure HTML5 version with SVG chevron

<select oninput="this.setAttribute('selected',this.value)">
  <option value="" disabled selected>Pick a fruit</option>
  <option>Apples</option>
  <option>Bananas</option>
  <option>Oranges</option>
</select>

<style>
  select {
    --chevron:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path stroke='grey' fill='grey' d='M6 8l-1 1l5 5l5-5l-1-1l-4 4l-4-4z'/></svg>");
    width:300px;
    font-size:3em;
    -o-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--chevron) right center no-repeat white;
  }

  select:hover{
    cursor:pointer;
    --chevron:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path stroke='black' fill='black' d='M6 8l-1 1l5 5l5-5l-1-1l-4 4l-4-4z'/></svg>");
  }
  select[selected=Apples]{
    background-color:lightgreen;
  }
  select[selected=Bananas]{
    background-color:yellow;
  }
  select[selected=Oranges]{
    background-color:orange;
  }
</style>

Here are some other related 𝘚𝘝𝘎 answers I posted on StackOverflow:

Upvotes: 1

Rado
Rado

Reputation: 739

You can hide the arrow and use :after pseudo selector to add this arrow:

.hello-dropdown .dropdown.icon {
   display: none;
}

div.hello-dropdown:after {
   content: '';
   position: absolute;
   top: 50%;
   right: 5px;
   width: 14px;
   height: 7px;
   margin-top: -4px;
   background-size: contain;
   background-image: url('https://svgshare.com/i/Nmi.svg');
   background-repeat: no-repeat;
}

You can also use the dropdown icon pseudo selector, but to be more accurate, you have to provide codepen example. :)

Upvotes: 4

Related Questions