用css美化select框
先上代码:
.selectData{
height: 0.42rem; position: absolute;
right:.28rem;
top:.30rem;
//去边框
border: none;
outline: none;
//圆角
-moz-border-radius:0.5rem;
-webkit-border-radius:0.5rem;
border-radius:0.5rem; background-color: #003366;
select{
border: none;
outline: none;
line-height: 0.40rem;
//通过padding-left的值让文字居中
padding-left:0.1rem;
background: none;
color: #ffffff; font-style: normal;
font-weight:bold;
}
option{
border: none;
outline: none;
background-color: #003366;
color: #ffffff;
font-weight:bold;
}
}
思想就是
用css美化select框的更多相关文章
- 只用CSS美化选择框
只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...
- css美化select标签,兼容ie10 ie10+,chrome。但不支持ie9 ie9-
让ie9 ie9+ 和非ie的浏览器加载这个hack.ie8,ie8- 就用自己的默认样式 <!-- email:416960428@qq.com author:李可 --> <!- ...
- jquery美化select,自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- 用纯css改变下拉列表select框的默认样式
http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...
- 纯css改变下拉列表select框的默认样式
下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下* ...
- [转载]用纯css改变下拉列表select框的默认样式
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...
- 用纯css改变下拉列表select框的默认样式(转)
用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习 关键字 前端 发布 kris 2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这 ...
- 点击盒子选中里面的单选框,并给盒子添加相应样式,美化单选框、复选框样式css用法,响应式滴
pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
随机推荐
- java file 常用操作
File file = new File("D:\\javaClass\\image"); // 测试此抽象路径名表示的文件或目录是否存在. // 当且仅当此抽象路径名表示的文件或 ...
- 支持utf8的str_split函数
<?php header("Content-type: text/html; charset=utf-8"); /** * 按字节数对字符串进行分片 * @param $st ...
- PostgreSQL - 如何杀死被锁死的进程
前言 在一次系统迭代后用户投诉说无法成功登陆系统,经过测试重现和日志定位,最后发现是由于用户在ui上进行了某些操作后,触发了堆栈溢出异常,导致数据库里的用户登陆信息表的数据被锁住,无法释放.这个表里存 ...
- 1、Kfaka 部署
一.使用Kfaka自带的zookeeper服务. 1.下载Kafka,下载地址: http://kafka.apache.org/downloads 2.区分Kfaka版本: Scala 2.12 - ...
- Python 学习随笔 - 1 - 基础数据类型、变量 及 基本运算
仅有的C语言的基础都是大学时学的: 准备赶潮流,开始学习Python. 随笔记录学习过程中,靠一点点C语言基础难以去理解的地方,以及区别于C语言的地方,做些笔记作为以后参考. Python 解释器直接 ...
- Python读写Excel文件和正则表达式
Python 读写Excel文件 这里使用的是 xlwt 和 xlrd 这两个excel读写库. #_*_ coding:utf-8 _*_ #__author__='观海云不远' #__date__ ...
- RK3399 删除开机锁屏界面
CPU:RK3399 系统:Android 7.1 删除开机锁屏界面 diff --git a/frameworks/base/packages/SettingsProvider/res/values ...
- OR(Convex_Optimization_读书杂记)
今天心血来潮,看了一下ConvexOptimization,看到一开始描述直线的部分,真的感觉翻译得很棒.$$ y = \theta x_1 + (1-\theta) x_2 \qquad x1, ...
- PHP获取上周一和上个月
PHP获取上周一有个坑,如果今天是周一,获取的是上周一.如果今天是周二到周日,获取的是本周一. 根据传递的页码数和每页显示多少条,获取对应的数据: if ($data['type'] == 'day' ...
- 使用Lock对象实现同步效果
Lock是一个接口,为了使用一个Lock对象,需要用到 Lock lock = new ReentrantLock(); 与 synchronized (someObject) 类似的,loc ...