Changing select dropdown Icon

Questions
1

Hi!

Is there a way to change the default select dropdown icon? I tried adding an Icon inside but it’s not working as expected.

2

It’s possible, attach your code

3

Hi, this is the code

            <ListInput

              name="issueType"

              onChange={e => setIssueType(e.target.value)}

              outline

              wrap

              required

              label="Type"

              defaultValue="default"

              type="select"

              

            >

              {createSelect()}

            </ListInput>

            <ListInput

              name="description"

              onChange={e => setDescription(e.target.value)}

              outline

              wrap

              required

              label="Details"

              type="textarea"

              placeholder="Please write full description for the issue."

            ></ListInput>

          </List>

This is the createSelect function:

function createSelect() {
let options = [];
options.push(
  <option key="disabled" disabled value="default">
    Select here
  </option>
);
for (let i = 0; i < issueTypes.length; i++) {
  options.push(
    <option key={issueTypes[i].key}>{issueTypes[i].label}</option>
  );
}
return options;
  }
4 
  <ListInput
    label="Gender"
    type="select"
    defaultValue="Male"
    placeholder="Please choose..."
    className="customSelect"
  >
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </ListInput>


.customSelect .input-dropdown::before{
    content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 20px;
    height: 20px;
    border: none;
}

Change CSS style as you need

Example: https://jsfiddle.net/Silver775/jpqc1v49/

1 Like