'Select box `appearance` on Mac /safari or chrome

How can I make the select box look the same on all web browsers and devices but I can't find the right way to do that, so far the biggest problem is on IE 10 and Microsoft edge, it seems the appearance is not working!

can anyone help with this issue? thank you.

.form {
  width: 300px;
  padding: 20px;
  background-color: #f5f5f5;
}

.textfield,
.select {
  margin-top: 5px;
  padding: 5px;
  width: 100%;
}

.select {
  background: #fff;
  border-radius: 0;
}

<div class="form">
  <div>
    <label for="text">
      <nobr>Text field</nobr>
    </label>
    <br />
    <input name="text" tabindex="1" class="textfield" />
  </div>
  <br />
  <div>
    <br />
    <select name="select" tabindex="2" class="select">
      <option value="">&#45;&#45; Please Select &#45;&#45;</option>
      <option value="option 1">Option 1</option>
      <option value="option 2">Option 2</option>
    </select>
  </div>
</div>

Solution 1:^[1]

I added an image as a background to the select field, some people recommended it and its working great. simply add bellow to .select in the css:

  background: #fff;
  border-radius: 0;
  -webkit-appearance: none;
  /* **this should be your icon or image to replace the down arrow** */
  background :url('http://via.placeholder.com/10x10') 95% no-repeat;
  background-color: #fff;
  background-position: right;
  background-size: 14px;

Solution 2:^[2]

To make the textbox and select box have exactly the same appearance style-wise, pick the style you want (i.e. something like border: 1px solid #666666 to mimic the <input> element) and apply it to both your .textfield and .select classes together.

You can use JavaScript to only apply that style when the user is on a Mac, if you want. (See this answer.)

.form {
  width: 300px;
  padding: 20px;
  background-color: #f5f5f5;
}

.textfield,
.select {
  margin-top: 5px;
  padding: 5px;
  width: 100%;
  border: 1px solid #666666;
}

.select {
  background: #fff;
  border-radius: 0;
}

.asterisk {
  color: #FF0004;
}

<div class="form">
  <div>
    <label for="text">
      <nobr>Text field</nobr>
    </label>
    <br />
    <input name="text" tabindex="1" class="textfield" />
  </div>
  <br />
  <div>
    <label for="select">
      <nobr>Select<span class="asterisk">&#42;</span></nobr>
    </label>
    <br />
    <select name="select" tabindex="2" class="select">
      <option value="">&#45;&#45; Please Select &#45;&#45;</option>
      <option value="option 1">Option 1</option>
      <option value="option 2">Option 2</option>
    </select>
  </div>
</div>

Solution 3:^[3]

.form {
  width: 300px;
  padding: 20px;
  background-color: #f5f5f5;
}

.textfield,
.select {
  margin-top: 5px;
  padding: 5px;
  width: 100%;
  border: 1px solid #666666;
}

.select {
  background: #fff;
  border-radius: 0;
}

.asterisk {
  color: #FF0004;
}

<div class="form">
  <div>
    <label for="text">
      <nobr>Text field</nobr>
    </label>
    <br />
    <input name="text" tabindex="1" class="textfield" />
  </div>
  <br />
  <div>
    <label for="select">
      <nobr>Select<span class="asterisk">&#42;</span></nobr>
    </label>
    <br />
    <select name="select" tabindex="2" class="select">
      <option value="">&#45;&#45; Please Select &#45;&#45;</option>
      <option value="option 1">Option 1</option>
      <option value="option 2">Option 2</option>
    </select>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3

'Select box `appearance` on Mac /safari or chrome

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]