用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 ...
随机推荐
- P1026 统计单词个数——substr
P1026 统计单词个数 string 基本操作: substr(x,y) x是起始位置,y是长度: 返回的是这一段字符串: 先预处理sum[i][j],表示以i开头,最多的单词数: 从后往前寻找,保 ...
- 模糊查询(附上源码和jquery-1.12.1.js,jquery-ui.js,jquery-ui.css)
直接上源码: <!doctype html> <html lang="en"> <head> <meta charset="ut ...
- 小程序can't read property 'push' of undefined
在某些情况下是因为没有初始化,所以初始化一下就好了
- IdentityServer4入门三:授权模式
在入门一.入门二我们实现了一个完整的API保护的过程.需要保护的API只需在其Controler上应用[Authorize]特性,来显式指定受保护的资源.而我们实现的这个例子,所应用的模式叫“Clie ...
- OpenJudge计算概论-分数求和
/*====================================================== 1006:分数求和 总时间限制: 1000ms 内存限制: 65536kB 描述 输入 ...
- gitment初始化评论跳回博客首页
表现 众所周知,gitment评论系统需要初始化以创建对应的issue,可是我在点击login with github的时候,总是跳向博客首页!WTF!什么鬼?这样不程序啊? 排查 1.F12查看lo ...
- mac上运行shell脚本遇到回车字符错误
今天运行一段其他人给的shell脚本,遇到如下问题,这个脚本的内容如下: dname=\((dirname "\)PWD") mkdir ${dname}"/rom_pu ...
- angular组件数据和事件
<h1>引入图片</h1> <img src="assets/images/02.png" alt="收藏" /> < ...
- 导入GoogleClusterData到MySQL
本篇随笔记录如何导入google-cluster-data-2011-1-2的 job_events和task_events到MySQL 1. 下载数据 download_job_events: im ...
- MGR集群搭建
MGR全称MySQL Group Replication(Mysql组复制),是MySQL官方于2016年12月推出的一个全新的高可用与高扩展的解决方案.MGR提供了高可用.高扩展.高可靠的MySQL ...