How to display an icon next to a Select element without obscuring the arrow

Asked
Active3 hr before
Viewed126 times

6 Answers

display
90%

Meta Stack Overflow , Stack Overflow help chat ,Stack Overflow en español

tl;dr: you can override the select-icon style with a position: "relative":

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  selectIcon: {
    position: "relative"
  }
}))

...

 <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select-adornment"
    value={age}
    onChange={handleChange}
    classes={{
       icon: classes.selectIcon //overriding the select-icon style
       }}
     endAdornment={
         <InputAdornment position="end">
            <HelpOutline />
          </InputAdornment>
          }
      >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
  </Select>
88%

Pretag
 Pretag team - issue, fix, solve, resolve
72%

In the pane, select an item in the list., In the pane, select an item in the list. ,On the right side of the item, click the "open eye" button. . This action hides the object.

Pretag
 Pretag team - issue, fix, solve, resolve
65%

The dropdown arrow icon in <select> input can be hidden by setting the CSS appearance: none.,appearance: none is supported in all browsers.,The CSS appearance property allows to suppress the native appearance of an element (which may vary with operating system), so that CSS can be used to restyle it.

The CSS appearance property allows to suppress the native appearance of an element (which may vary with operating system), so that CSS can be used to restyle it.

select {
   appearance: none;
}
load more v
75%

Edit the color of your icons, change the size and download them in all formats, SVG, PNG, EPS. See more, The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats. ,Download free vector icons and stickers for your projects. Resources made by and for designers. PNG, SVG, EPS, PSD and BASE 64 formats.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Please stand by, while we are checking your browser...,Please enable Cookies and reload the page.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "display-undefined" queries related to "How to display an icon next to a Select element without obscuring the arrow"