自己修改select的样式(修改select右边的小三角)
CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。
- 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; }
参考链接:
http://uplifted.NET/programming/change-default-select-dropdown-style-just-css/
自己修改select的样式(修改select右边的小三角)的更多相关文章
- 今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐。最后找到问题所在doctype
今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐.最后找到问题所在doctype <-- 这个小箭头
- 解决手机浏览器和微信中select中border:none;无用和去掉小三角
设置select的边框为none:在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框 解决办法: appearance:none; -moz-appearance:none; /* Fi ...
- 用CSS样式写选择框右侧小三角
直接上代码! <!DOCTYPE html><html lang="en"><head> <title>小三角</title& ...
- 修改radio、checkbox、select默认样式的方法
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...
- select下拉框option的样式修改
select原样式: 进行样式修改后的样式: 附上修改代码: //select外面必须包裹一个div,用来覆盖select原有的样式<div class="option"&g ...
- 【css】 如何修改select的样式
select { /*清除select默认样式*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appear ...
- select 下拉框样式修改 option文字居右
select { direction: rtl; /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的sele ...
- m_Orchestrate learning system---三十六、如何修改插件的样式(比如ueditor)
m_Orchestrate learning system---三十六.如何修改插件的样式(比如ueditor) 一.总结 一句话总结:所有的js,html插件,修改样式无非是两种,一是直接修改css ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
随机推荐
- Temporary Post Used For Theme Detection (da655c32-bc15-41ad-bf89-e76c1ec1bea7 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)
This is a temporary post that was not deleted. Please delete this manually. (997facfe-d420-4437-a222 ...
- 一些有用的webservice
http://developer.51cto.com/art/200908/147125.htm 下面总结了一些常用的Web Service,是平时乱逛时收集的,希望对大家有用. ========== ...
- USB Type-C 连接器规范推出之后,市场很多低质量线材容易损坏设备
USB Type-C 连接器规范推出之后,已有不少行动装置产品使用,其中最知名的产品为 Apple MacBook,机身仅提供一组 Type-C 端口,同时兼具充电与数据传输之用.市面上第三方厂商也开 ...
- 【HDOJ】1068 Girls and Boys
匈牙利算法,最开始暴力解不知道为什么就是wa,后来明白,一定要求最优解.查了一下匈牙利算法相关内容,大致了解. #include <stdio.h> #include <string ...
- Java金字塔及变形
Java金字塔 package com.tfj.test; public class JinZiTa { public static void main(String[] args){ int num ...
- [HDU POJ] 逆序数
HDU 1394 Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/3276 ...
- 【转】Mac用户必备!100多款免费实用的苹果Mac软件大搜集
原文网址:http://www.iplaysoft.com/100-mac-freeware.html 对于 Mac 新手,尤其是刚刚从 Windows 转到 Mac OS X 的用户来说,最大的痛苦 ...
- 使用console进行性能测试和计算代码运行时间
对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用debugger会显得过于笨重,最常用的方法是会将值输出到控制台上方便调试.最常用的语句就是console.log(expre ...
- HtmlParser应用,使用Filter从爬取到的网页中获取需要的内容
htmlparser是一个纯的java写的html解析的库,它不依赖于其它的java库文件,主要用于改造或提取html.它能超高速解析html,而且不会出错.现在htmlparser最新版本为2.0. ...
- 使用IIS配合VS调试
当我们使用Visual Studio调试(Debug)的时候,通常我们会选择VS自带的ASP.NET Developerment Server(也是默认选项),当第一次调试的时候(按F5或Ctrl+F ...