[Angela]

I found this tutorial online but it didn’t work for me:

https://travis.media/how-to-easily-style-a-select-dropdown/

In his article he says this works:

form.woocommerce-ordering:after {
  content: '\2304';
  font-size: 30px;
  line-height: 23px;
  padding-right: 2px;
}

However it failed to do anything for me.

[Betty]

P.S. I’m trying to use Font Awesome icons or other font icons for select background and eliminate the default icon from Chrome/Safari browser

[Sara]

the OP example might be from years ago, not sure.

this works better:

https://gist.github.com/TanvirAmi/630a95aab8256fef6fb6ddd5be0e6898

.woocommerce-page .woocommerce-ordering:before {
  position: absolute;
  right: 15px;
  top: 50%;
  color: #abaeaf;
  content: "\f107";
  font-family: 'FontAwesome';
  margin-top: -7px;
  pointer-events: none;
}

.woocommerce .woocommerce-ordering:after {
  content: '';
  position: absolute;
  height: 15px;
  width: 13px;
  background: #fff;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

[Author]

Posts