CSS隐藏打印时选择标记中的下拉箭头

My HTML code goes here

我的HTML代码就在这里

<select> 
  <option value="mr"> Mr. </option>
  <option value="mrs"> Mrs. </option>
</select>

When i print the page i dont want to get the drop down arror, how to hide using css?

当我打印页面我不想得到下拉恐怖,如何隐藏使用CSS?

2 个解决方案

#1

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

在印刷品上应用上述css

#2

Depends on what browser you are using...

取决于您使用的是什么浏览器......

I haven't found a solution for Firefox yet but the rest should be done with:

我还没有找到Firefox的解决方案,但其余的应该完成:

select::-ms-expand {
    display: none;
}
.noarrow{

   overflow: hidden;

}

.noarrow select {
  width: 100px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;    
}

#1

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