简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

css clear select drop-down arrow style

WBOY
Release： 2016-09-02 08:42:56
Original
1228 people have browsed it
<span style="color: #000000;">select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;

  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
}


/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }</span>
Copy after login

 

Related labels：
css清除select的下拉箭头样式
source：php.cn
Previous article：Summary of basic html learning-2016.8.31 Next article：Place the mouse on the input box, and the input box and picture will change styles at the same time.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Is there a way to have the CSS transparency style apply only to the label's innerText and not to any child elements? In the example below I have a lot of tags where the tags contain inputs. Is there a way to...
From 2023-08-17 20:51:57
0
1
250
Custom drop-down arrow Is it possible to change the select tag's dropdown arrow to a custom arrow consisting of 4...
From 2023-08-17 17:52:04
0
1
236
javascript - 怎样改变select弹出层的css样式 用ionic框架和HTML5开发的APP，用select，option标签在安卓是弹出层，怎么改变这个弹出层的css样式（背景色和文字样式改变，注：在浏览器是看到是下拉列表，打包在...
From 2017-04-11 11:28:04
0
3
175
javascript - 网页在iOS环境下, input输入框每次键入都会闪屏 如题, 网页在iOS环境下, input输入框每次键入都会闪屏(textarea正常).安卓下正常, iOS下的自带浏览器, UC浏览器, 微信浏览器都有问题.试过把JS文件隐藏问...
From 2017-04-11 10:29:40
0
1
202
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！