自己修改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是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
随机推荐
- Nhibernate 分页功能
cs: public IEnumerable<ArticleView> MyGetAll(int start, int limit, ref int count) { try { var ...
- MongoDB索引介绍
MongoDB中的索引其实类似于关系型数据库,都是为了提高查询和排序的效率的,并且实现原理也基本一致.由于集合中的键(字段)可以是普通数据类型,也可以是子文档.MongoDB可以在各种类型的键上创建索 ...
- 从clone()谈protected
看到Object的clone()是protected的,然后看到<java2认证考试指南>上描述:一个对象只能请求其他对象的克隆,后者的类与被克隆对象属于同一类,或是被克隆对象的子类. e ...
- 关于移动端和PC端的交互的区别
对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...
- Linux内核态抢占机制分析
http://blog.sina.com.cn/s/blog_502c8cc401012pxj.html [摘要]本文首先介绍非抢占式内核(Non-Preemptive Kernel)和可抢占式内核( ...
- QStringRef可以提高性能,下次注意使用;QPair方便了语法,函数可以一次返回多个返回值,方便使用
而且QPair从此与各种QMap容器联系了起来,会非常好用.甚至QList也可以成双成对的使用元素了: QList<QPair<int, double> > list;list ...
- Tomcat 系统架构与设计模式,第 1 部分: 工作原理
简介: 这个分为两个部分的系列文章将研究 Apache Tomcat 的系统架构以及其运用的很多经典设计模式.本文是第 1 部分,将主要从 Tomcat 如何分发请求.如何处理多用户同时请求,还有它的 ...
- spring cloud官方文档提到的服务开发的12项要素。
I. Codebase 从一个代码库部署到多个环境. II. Dependencies 使用显式的声明隔离依赖,即模块单独运行,并可以显式管理依赖. III. Config 在系统外部存储配置信息. ...
- [译]GotW #6b Const-Correctness, Part 2
const和mutable对于书写安全代码来说是个很有利的工具,坚持使用它们. Problem Guru Question 在下面代码中,在只要合适的情况下,对const进行增加和删除(包括 ...
- bzoj2756
看到相邻格子都+1的操作一下就想到黑白染色了相邻格子都+1说明不管怎么弄,黑格子的总和和白格子总和的差总是定值这里首先要注意,最后不一定变成的是所有元素中的最大值,可能比它大比如 1 2 2 ...