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:

<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

Accessing the constants and state of child components within a parent component in React

I've created a MUI TAB component that looks like this <Box sx={{ width: "100%" }}> <Box sx={{ borderBottom: 1, borderColor: "divider" }}> <Tabs value={value} onChange={handleChange} aria-label ...

reactjstypescript

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Any recommendations on how to specifically code the styles for portrait orientation solely on the Kindle Fire device? ...

htmlcsstabs

Observing the element with a directive

I am working with the following code: angular.module("Test", []) .directive("testDirective", function () { return { restrict: "A", scope: { model: "=" } link: function(scope, element) { scope.$watch(function () { elem ...

javascriptangularjsangularjs-directiveangularjs-scope

Updating default values in reactive() functions in Vue 3: A step-by-step guide

Currently, I am in the process of developing an application using Nuxt 3 and implementing the Composition API for handling async data. The specific scenario I am facing is this: I have a page that displays articles fetched from the database using useLazyFe ...

javascriptvue.jsnuxt.jsvuejs3nuxtjs3

Incorporate a `fresh Audio` element into my redux repository

I'm attempting to include a new Audio element in my redux store. This is how my reducer appears: export const songsReducer = (state = {}, action) => { switch (action.type) { case "PLAY_SONG": return { ...state ...

javascriptreactjsecmascript-6redux

Leveraging JSON data in a client-side JavaScript script

Recently, I started exploring node.js and express. One issue that I am currently facing is how to correctly retrieve json data in a client-side javascript file. I keep receiving a 404 error indicating that the .json file cannot be found. In my project&apo ...

javascriptjqueryjsonnode.jsexpress

Sending a reference to the event object within a JavaScript function

There are times when we need to use the event object in JavaScript. Below is an example of how we can pass the event: function test(e){ console.log(e); e.preventDefault(); console.log("You are not going to redirect"); } HTML <a href="www. ...

javascriptjquery

Dynamic tooltips with jQuery: enhancing user experience through mouseover and

I seem to have encountered a problem with the functioning of my tooltip. Everything works fine, except when I move my cursor towards the right side, it tends to be faster than the tooltip itself and ends up hovering over it momentarily. This results in the ...

javascriptjquery

Keep moving forward in Sailsjs even after sending back a response with res.json();

It will keep running even if the condition is met and the code inside return res.json() gets executed. _.each(rooms, function(room){ if(room.users.length == users.length) { return res.json(room); // <-- returns but execution continues } ...

javascriptnode.jssails.js

`I noticed that the CSS appears differently when viewed in Mozilla compared to Chrome``

Why do the images with the same CSS property appear different in Chrome and Mozilla? I want them all to float left with equal margins between them, covering the complete area horizontally despite having varying image widths. I'm unsure why there is a ...

htmlcssgoogle-chromefirefox

What is the best way to modify the views directory for deploying on Vercel?

Currently facing an issue trying to deploy my Express application with EJS template on Vercel. Post deployment, encountering an internal server error along with the following message in the logs: Error: Failed to lookup view "home.ejs" in views directory " ...

javascriptnode.jsexpressejsvercel

Find the difference between the sum of diagonals in a 2D matrix using JavaScript

I'm currently practicing on hackerrank and came across a challenge involving a two-dimensional matrix. Unfortunately, I encountered an error in my code implementation. 11 2 4 4 5 6 10 8 -12 The task at hand is to calculate the sum along the primary ...

javascript

What is the process to bring in a yup schema from a separate file?

In an effort to organize my form code more efficiently, I've been working on putting schemas in separate files. However, I've run into a issue where when I export a yup schema and then import it into another schema, the validation doesn't se ...

reactjsformikyup

Guide to Re-rendering a component inside the +layout.svelte

Can you provide guidance on how to update a component in +layout.svelte whenever the userType changes? I would like to toggle between a login and logout state in my navbar, where the state is dependent on currentUserType. I have a store for currentUserTyp ...

javascripthtmlcsstypescriptsvelte

Upload an image to a Node.js API using the Next.js API directory

I am working with a file instance that I obtained from the formidable library. Here's how it looks: photo: File { _events: [Object: null prototype] {}, _eventsCount: 0, _maxListeners: undefined, size: 16648, path: 'public/ ...

javascriptnode.jsnext.jsform-dataformidable

Leveraging a VueJS prop as a variable in an array mapping operation

Trying to figure out a solution where a variable (prop) can be used in an array map function. The initial code snippet looks like this: var result = this.$store.getters['example/store'].map(a => a.fixed_column) I aim for fixed_column to be ...

javascriptarraysvue.jsvuejs2

Font that has been downloaded is not showing up on the HTML document

I recently downloaded a new font and ensured the file location is correct, but for some reason it's not working: <style> @font-face { font-family:"myfont"; src: url('fonts/Helvetica85Heavy_22449.ttf'); } h1 { font-family: ...

htmlcssfonts

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

As a novice in Jquery, I am currently implementing a simple slide toggle on a button. Initially, the div is set to display none, and when the button is clicked, the slide toggle function is triggered. This works well. However, I also want the div to slide ...

jqueryhtmlcss

Is it possible to apply CSS based on a component's displayName?

Are you a CSS pro? I'm attempting to apply a class that will make all descendants of an element read-only, but for some reason the style isn't being applied as expected: #ComponentDisplayName * { -webkit-user-select: text; -moz-user-sel ...

javascripthtmlcssreactjscss-selectors

Ways to resolve the recurring npm ERR! code that appears whenever I enter npm start in the terminal

As I work on creating an application in React, I encountered an issue when trying to run "npm start" in the command line. The error message I received is shown below: npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/a1234/Downloads/meditati ...

node.jsreactjsnpm