How to Style an HTML Select Box to Omit Drop Down Arrow for Print

How can I style an html select box to omit drop down arrow for print?

You can't.

There is nothing in the standards that specifies that the select element has to have an arrow to indicate to the user that it has options to choose from, or how those options are shown. As those visual elements are not defined, there is naturally nothing defined for changing them.

You just have to display a different element when printing.

CSS hide drop down arrow in select tag on printing

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* If you want to remove the border as well */
background: none;
}

Apply the above css on print

How to remove the arrow from a select element in Firefox

Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.

I've come up with a simple workaround.

This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.

Say this is your select menu:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

And lets assume the css class 'css-select' is:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.

Now to get this going in firefox, add a span element around with the class 'css-select-moz':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.

I have only tested it in firefox (mac) version 18, and then 22 (after I updated).

All feedback is welcome.

How to change colour of select dropdown arrow?

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

How to remove border of drop down list : CSS

The most you can get is:

select#xyz {
   border:0px;
   outline:0px;
}

You cannot style it completely, but you can try something like

select#xyz {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Is there any way to fix size of custom dropdown arrow in css?

Supply a relative container to act as a boundary for the absolute positioned child. Something like below, cheers;

.container select {
  border-radius: 20px;
  padding: 5px 38px 7px 23px;
  border: 2px solid orange;
  appearance: none;
  position: relative;
}

.container i.fa-angle-down {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1rem;
  border-radius: 20px;
  color: white;
  background-color: orange;
  padding: 8px;
  padding-left: 10px;
  font-size: 20px;
  pointer-events: none;
}

.custom-dd {
  display: inline-block;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/>
<div class="container">
  <h6>Current open positions</h6>
  <div class="form-group">
    <label class="search">Search by Location</label>
    <div class="custom-dd">
      <select>
        <option>Canada</option>
        <option>USA</option>
      </select>
      <i class="fas fa-angle-down"></i>
    </div>
  </div>
</div>

---

Related Topics