只用CSS美化选择框的实现代码
2012-03-04 21:25
441 查看
下面是一个默认样式的下拉框的长相:
Here is the first option The second option
HTML code:
一个选择框的某些部分我们是可以美化的,比如字体、边框、颜色、内边距和背景颜色:
Here is the first option The second option
但是烦人的下拉箭头还是保持不变。没有直接美化它的方式,但解决方案还是非常简单的,首先我们需要用一个div容器包裹在select元素外围:
下一步我们需要加入一些css,以确保选择框元素被以某种方式美化:
我们需要确保选择框的跨度比外围的div容器更宽,这样默认的下拉箭头就会消失(译者注:选择框比外面的div宽大,默认的下拉箭头就会被隐藏)
下面是我们要用的新下拉箭头:
我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置:
知道这点解决办法将使你非常容易的,不用别的只使用css就能美化您的选择框。
译者注:在线调式地址http://jsfiddle.net/shishaomeng/KGrYB/ ,各位看官可自行进入调试
Here is the first option The second option
HTML code:
<select> <option>Here is the first option</option> <option>The second option</option> </select>
一个选择框的某些部分我们是可以美化的,比如字体、边框、颜色、内边距和背景颜色:
Here is the first option The second option
但是烦人的下拉箭头还是保持不变。没有直接美化它的方式,但解决方案还是非常简单的,首先我们需要用一个div容器包裹在select元素外围:
<div class="styled-select"><select> <option>Here is the first option</option> <option>The second option</option> </select></div>
下一步我们需要加入一些css,以确保选择框元素被以某种方式美化:
.styled-select select { background: transparent; width: 268px; padding: 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; /*for chrome*/ }
我们需要确保选择框的跨度比外围的div容器更宽,这样默认的下拉箭头就会消失(译者注:选择框比外面的div宽大,默认的下拉箭头就会被隐藏)
下面是我们要用的新下拉箭头:
我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置:
.styled-select { width: 240px; height: 34px; overflow: hidden; background: url(new_arrow.png) no-repeat right #ddd; }
知道这点解决办法将使你非常容易的,不用别的只使用css就能美化您的选择框。
译者注:在线调式地址http://jsfiddle.net/shishaomeng/KGrYB/ ,各位看官可自行进入调试
相关文章推荐
- select下拉选择框美化实现代码(js+css+图片)
- select下拉选择框美化实现代码(js+css+图片)
- 用css alpha 滤镜 实现input file 样式美化代码
- JS+CSS实现分类动态选择及移动功能效果代码
- 只用CSS美化选择框
- CSS中奇数选择器与偶数选择器,一句代码怎么实现?
- 不用背景图片,只用css代码实现面包屑样式
- JS+CSS实现分类动态选择及移动功能效果代码
- 用css alpha 滤镜 实现input file 样式美化代码
- 只用CSS美化选择框
- 只用CSS美化选择框
- 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。
- jquery实现select下拉框美化特效代码分享
- JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
- html、css和jquery相结合实现简单的进度条效果实例代码
- 一个可以记住上一次的选择的选择目录的对话框的实现代码段
- css 选择后更改文字背景 CSS3 实现改变默认文本选中的颜色
- 纯CSS实现漂亮的下拉导航效果代码
- css纯代码实现圆边框和圆按钮
- php实现的css文件背景图片下载器代码