下拉框等需要显示上下箭头切换的CSS样式
.icon-right, .icon-down, .icon-up {
display: inline-block;
padding-right: 13rpx;
position: absolute;
/*组件内调整箭头的位置*/
right: 20rpx;
top: 10rpx;
} .icon-right::after, .icon-down::after, .icon-up::after {
content: "";
display: inline-block;
position: relative;
bottom: 2rpx;
margin-left: 10rpx;
height: 10px;
width: 10px;
border: solid #bbb;/*上下箭头的颜色*/
border-width: 2px 2px 0 0;/*上下箭头的粗细*/
} .icon-right::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
} .icon-down::after {
bottom: 14rpx;/*旋转后需要上移*/
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
} .icon-up::after {
bottom: 0rpx;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
效果:
下拉框等需要显示上下箭头切换的CSS样式的更多相关文章
- 让下拉框中同时显示Key与Value
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Ext 下拉框联动第一次显示不正常的问题
做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...
- MVC实现多选下拉框,保存并显示多选项
在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...
- select下拉框右对齐,去掉箭头,替换箭头
右对齐 select{ width:auto; direction: rtl; } select option { direction: ltr; } 去掉箭头(不设置背景色会有灰色背景) selec ...
- 如何让ie8地址栏下拉框里不显示历史记录和收藏夹
打开浏览器,点击IE浏览器上方工具——Internet选项——内容——自动完成的设置——地址栏里面的勾勾去掉,浏览历史记录和收藏夹里面的东西就自动没有了
- 【Layui】Layui模板引擎生成下拉框不显示
首先让我震惊了一下,layui引擎模板居然是支持ajax操作的 博主的需求是需要在数据表格内放入下拉框而下拉框的数据是数据库内查出来的(详见上一篇博客),但是下拉框怎么也显示不出来 找了四个小时的问题 ...
- chosen组件实现下拉框
chosen组件用于增强原生的select控件,使之有更好的用户体验.官方demo https://harvesthq.github.io/chosen/ 目前项目中碰到的使用,比如一个页面中有两个不 ...
- select下拉框的探索(<option></option>标签中能嵌套使用其它标签吗)
select标签大家应该经常用到,有个问题可能没怎么注意过, select标签里面的option标签可以嵌套其它标签吗,比如i,span标签等? 经本人测试,答案是:可以嵌套其它标签,但审查元素会 ...
- semantic-ui 下拉框
注意:在使用semantic的下拉框的时候,不仅需要引入semantic.css,还要引入semantic.js,最重要的是引入jquery.否则下拉效果不会显示. 并且,jquery必须先于sema ...
随机推荐
- Layer获取iframe的dom元素及调用iframe页的js方法
1. 父页面点击第一个按钮触发,获取子页面中的body元素,调用子页面中定义的js方法 yes : function(index,layero){ //获取iframe的body元素 var body ...
- 37 树莓派识别opencv-dnn
https://heartbeat.fritz.ai/real-time-object-detection-on-raspberry-pi-using-opencv-dnn-98827255fa60 ...
- contest5 CF991 div2 ooooxx ooooox ooooox
题意 div2D 给出一个棋盘, 有一些点不能放, 总共\(2\)排, 长度\(n(\le 100)\) 在上面空位摆放\('L'\)字形的牌, 问最多能放几个 例如: 00X00X0XXX0 0XX ...
- Python实现电子词典(web)
思路: 准备配置文件setting.py,运行src/data.py,使用MySQL新建数据库并创建table,将字典数据导入到table中.编写server.py文件,建立服务端,循环接收web请求 ...
- 使用emplace操作
C++ 11新标准中引入了三个新成员——emplace_front.emplace和emplace_back,这些操作构造而不是拷贝元素.这些操作分别对应push_front.insert和push_ ...
- 洛谷P5020 货币系统
题目 题意简化一下就是找题目给定的n个数最多能消掉多少个,我们用个tong[i]来记录i这个数值能不能用小于等于i的货币组合起来,等于1意味着他只能由自己本身的货币组成,等于2说明他可以被其他货币组成 ...
- python总结一
1. python中的而标准数据类型: number(数字) string(字符串) list(列表) tuple(元祖) dic(字典) 其中数字类型有: python支持四种不同的数字类型: in ...
- Python爬虫爬取BT之家找电影资源
一.写在前面 最近看新闻说圣城家园(SCG)倒了,之前BT天堂倒了,暴风影音也不行了,可以说看个电影越来越费力,国内大厂如企鹅和爱奇艺最近也出现一些幺蛾子,虽然目前版权意识虽然越来越强,但是很多资源在 ...
- OCR识别的Android端实现
1.OCR简介OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别 ...
- Maven 教程(12)— Maven生命周期和插件
原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79549695 除了坐标.依赖以及仓库之外,Maven的另外两个核心概念是生命周期 ...