Select border color

Question

I don't seem to be able to get rid of the border (outline, box-shadow?) against the select element in Opera browser.

None of the below rules are removing the border:

select {
  /*border: 0;*/
  border: none;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}

<select class="form-control">
  <option selected="selected" value="0">Most Popular</option>
  <option value="1">A-Z</option>
  <option value="2">Z-A</option>
  <option value="3">Lowest price</option>
  <option value="4">Highest price</option>
</select>

Opera version is 46.0.2597.57 (PGO).

The above code is working perfectly in other browsers tested - Chrome, Firefox, Internet Explorer and Edge.

Any hint would be helpful.

EDIT I am using Windows 10 64-bit, here is a screenshot:

Answer 1

You can get rid of the border with -webkit-appearance: none;, but this removes the caret too, so you might have to add this again manually. I could not manage to find a better answer to this, since opera is really stubborn with this border. (Updated solution with caret below)

select {
  border: 0;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
}

<select class="form-control" id="1">
  <option selected="selected" value="0">Most Popular</option> 
  <option value="1">A-Z</option>
  <option value="2">Z-A</option>
  <option value="3">Lowest price</option>
  <option value="4">Highest price</option>
</select>

Updated solution: This is more like a workaround, than a solution, but this has a working "fake" caret, and looks like a borderless dropdown, even in Opera.

select {
  border: 0;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  width: 100% ;
  position: absolute;
}

.select-wrapper {
  position: relative;
  max-width: 100px;
}

.select-wrapper:after {
  content: "\25BE";
  float: right;
  margin-top: -3px;
}

<div class="select-wrapper" id="label-for-1">
  <select class="form-control" id="1">
    <option selected="selected" value="0">Most Popular</option>
    <option value="1">A-Z</option>
    <option value="2">Z-A</option>
    <option value="3">Lowest price</option>
    <option value="4">Highest price</option>
  </select>
</div>

Answer 2

You can use something like border: 1px solid white to overlap Opera's border if you have solid background behind your select.

Or you can apply custom styles for webkit browsers to your select via CSS hacks targeting specific browser, removing standard appearance using -webkit-appearance: none and applying SVG background-image for standard arrow. This way standard appearance for IE and Firefox will be intact.

select {
  border: 0;
  outline: 0;
  background-color: transparent;
}


/* Select only webkit browsers */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select {
    /* remove arrow */
    -webkit-appearance: none;
    /* add some padding for image */
    padding-right: 15px; 
    /* apply SVG with arrow */
    /* change width value to move arrow to the left */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 15 15"><path d="M 8,5.5 11,9.5 14,5.5 z"></path></svg>');
    background-repeat: no-repeat;
    background-position: center right;
  }
}

<select class="form-control">
  <option selected="selected" value="0">Most Popular</option>
  <option value="1">A-Z</option>
  <option value="2">Z-A</option>
  <option value="3">Lowest price</option>
  <option value="4">Highest price</option>
</select>