用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 ...
随机推荐
- 国外最受欢迎的BT-磁力网站
1.海盗湾 The Pirate Bay 2.KickAssTorrents 3.Torrentz 4.zooqle 5.SumoTorrent 6.TorrentDownloads 7.Rarbg ...
- polyfit 多项式曲线拟合matlab
polyfit 多项式曲线拟合 全页折叠 语法 p = polyfit(x,y,n) [p,S] = polyfit(x,y,n) [p,S,mu] = polyfit(x,y,n) 说明 示例 ...
- Linux中查看某个端口占用情况
譬如在linux中排查某个端口是否被占用,可以通过如下命令进行排查,排查方法如下: 1: 排查 : 应用是否被人debug. 8787 为端口号 netstat -anp |grep 8787 图中 ...
- 结构体与C++sort()函数的用法
C++sort()函数的用法 先看道题(本题来自http://codeup.cn/第26099): 题目描述 [问题描述] 高三全省联合模拟考试刚刚结束,经过各科老师的努力,各个学科的改卷工作终于结束 ...
- Mysql 生成指定时间段内的所有日期
DELIMITER $$ DROP PROCEDURE IF EXISTS create_calendar $$ CREATE PROCEDURE create_calendar (s_date DA ...
- codeforces319C
C. Kalila and Dimna in the Logging Industry time limit per test 2 seconds memory limit per test 256 ...
- 走进JavaWeb技术世界12:从手动编译打包到项目构建工具Maven
小李的Build之路(上) 转自: 刘欣 码农翻身 2016-07-10 摘要:手工Build的烦恼要不是为了和女朋友留在一个城市,小李肯定去北上广奋斗去了.现在他只能留在这个2.5线城市,进入这家软 ...
- Hive和Hadoop
我最近研究了hive的相关技术,有点心得,这里和大家分享下. 首先我们要知道hive到底是做什么的.下面这几段文字很好的描述了hive的特性: 1.hive是基于Hadoop的一个数据仓库工具,可以将 ...
- fdisk交互
fdisk交互 命令 说明 指令 a 设置可引导标记 toggle a bootable flag b 编辑bsd磁盘标签 edit bsd disklabel c 设置DOS操作系统兼容标记 tog ...
- pytest 基本用法
1.断言用assert,可以进行==,!=,+,-,*,/,<=,>=,is True.False,is not True.False ,in ,not in 等判断. import py ...