Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears:

https://i.sstatic.net/GpvfC.png

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

CSS styling:

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

If you inspect the caret, you'll see the following code:

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

Interested in replacing the caret with a custom SVG image like this one: ?

javascripthtmlcssreactjssvg

Answer №1

To create a dropdown arrow, you can hide the default arrow and add a custom one using the :after pseudo selector like this:

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

div.custom-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;
}

If you prefer, you can also use the dropdown icon pseudo selector, but for better clarity, consider providing a codepen example. :)

Answer №2

A sleek HTML5 example featuring SVG chevron

<select oninput="this.setAttribute('selected',this.value)">
  <option value="" disabled selected>Choose 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>

Don't miss these related SVG answers I shared on StackOverflow:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular ngx-translate not displaying image

My Angular application is utilizing ngx-translate to support multiple languages. I am trying to dynamically change an image based on the language selected by the user. However, I am facing difficulty in updating the image when a language is clicked. The ap ...

javascriptangulartypescript

React, Firebase Authentication issue

I've encountered an issue when trying to authenticate using Firebase with React. After updating all the Node_modules, I was able to successfully log in. However, when attempting to retrieve the logged-in user data from Firebase, I received the follow ...

reactjsfirebasereduxfirebase-authentication

Leveraging asynchronous data fetched from the state within a React component to populate ListItem components in a Material-UI List for React

When using the List component from http://www.material-ui.com/#/components/list, I encountered an issue where asynchronous received elements are not being rendered. What steps should be taken to resolve this? This is how I currently implement my list in t ...

reactjsmaterial-ui

Having trouble with PHP's json_decode function with GET variables in an object?

I am currently working with an angular code that utilizes jsonp. One issue I am encountering is related to the object variable 'o_params' in my params. Here is the javascript code snippet: $http({ method: 'JSONP', ...

javascriptphpangularjsjsonjsonp

Organize a collection of items in AngularJS

Consider the following array: var members = [ {name: "john", team: 1}, {name: "kevin", team: 1}, {name: "rob", team: 2}, {name: "matt", team: 2}, {name: "clint", team: 3}, {name: "will", team: 3} ]; I want to create an unordered list for each ...

javascriptangularjsarraysfunction

Incorporate Aria Label into a Website Link

Currently working on enhancing website accessibility. I have identified a close menu button that lacks an Aria Label, and my goal is to rectify this using JavaScript. Although I am utilizing the script below to target the specific ID and add the attribute ...

javascriptwordpressdom

Customizing the size of dateBox icons in JQuery Mobile

Is there a way to increase the button size within the input box of a dateBox? Currently, it appears small and difficult to click accurately. Additionally, it would be beneficial if clicking anywhere in the input field could open the calendar, instead of ju ...

jqueryhtmljquery-mobile

In the event that the final calculated total is a negative number, reset it to zero. Inform the user of an error through the use of a prompt dialog box

I'm having trouble getting the grand total to display as 0 when I enter all amounts in positive values and then change the unit prices to negative values. However, it works fine when I only enter negative values throughout. Can someone please help me ...

javascripthtml

Multiple images overlapping each other in a dynamic parallax effect

Despite my fear of receiving down votes, I have been unsuccessful in finding the answer to my question so I will proceed with asking it. I am attempting to replicate a parallax effect similar to the one showcased on this website, particularly the image of ...

jqueryhtmlcss

The JSON.stringify method may not accurately reflect the original object that was converted into a string

Working on a Connect Four app for my school project has been an interesting challenge. At the moment, I am grappling with JSON.stringify and trying to encode an object that holds a two-dimensional array of "hole" objects to eventually send it to the server ...

javascriptjsonnode.jsstringify

What steps can I take to stop the textfield from automatically changing the ID "myid" to "myid-tokenfield" when using Tokenfield for Bootstrap?

While utilizing Tokenfield for Bootstrap, I have encountered an issue where the id of my textfield gets modified from myid to myid-tokenfield. In order to properly interact with the search engine I am using, this textfield must maintain a specific id. The ...

javascripttwitter-bootstrapbootstrap-4bootstrap-tokenfield

Angular routes cause a glitch in the Bootstrap navbar, causing it to shift to the left on certain active

Apologies for the simple question, I am new to web design and couldn't find a solution even after extensive googling and searching. The issue I am facing is that when clicking on "EX5" or "EX6" in my navbar, it shifts to the left side of the screen i ...

javascripthtmlcssangularjsbootstrap-4

extracting data from a javascript array

While facing an issue with scraping a website , I received helpful solutions from Fatherstorm and marcog. Despite the great solution provided by Fatherstorm, there were some minor bugs related to start time and the number of image sources being retrieved a ...

phpjavascript

Double-executing methods in a component

I have encountered an issue while trying to filter existing Worklog objects and summarize the time spent on each one in my PeriodViewTable component. The problem I am facing involves duplicate method calls. To address this, I attempted to reset the value ...

htmlangulartypescript

Ways to identify which arrays within an object contain an element

This question is unique as it pertains to objects of arrays rather than arrays of objects. I am working with a data structure like the one below and my goal is to determine if any of the arrays inside the object have values. What I'm looking for is a ...

javascriptarraysjavascript-objects

Determining the Width of a DIV Dynamically with CSS or LESS Depending on the Number of Siblings

One of my challenges involves a parent DIV with a width set to 100%. Dynamically, this parent DIV is filled with numerous children DIVs. I am trying to calculate and assign their widths using only the calc method in CSS or LESS. This is because the flex ...

javascripthtmlcssd3.jsless

Tips for setting up Greasemonkey to automatically click on an unusual link on a particular website

I'm not a master coder by any means; I can handle some scripts but that's about it. Treat me like a total beginner, please! ;-) I want to automatically expand two specific links on a webpage using a GM Script. On a French dating site in the prof ...

javascripthtmlhyperlinkclickgreasemonkey

Add PHP functionality to insert a jQuery array of select2 tags

After browsing numerous threads on various platforms regarding this issue, I have yet to find a solution. Therefore, I am reaching out for help once again. I am currently utilizing the select2 jQuery plugin and aiming to insert tags into an SQL database us ...

phpjqueryhtmlarraysjquery-select2

Delete a designated section from a URL with the power of jQuery

I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...

javascriptjqueryhtml

steps for signing in to garmin account with javascript

Attempting to set up an Oauth1 login for Garmin using Angular2 and standard http calls, but encountering a pre-flight OPTIONS call error on the initial request to oauth/request_token path. It seems like CORS is not enabled or something similar. Has anyone ...

javascriptangulartypescriptoauthgarmin