这篇教程中,我将给大家展示表单元素下拉选择框select的CSS替代方案。该方法采用css来实现,看上去非常简单。我们用radio标签列表来模拟下拉列表,选择一个radio可以很好的模拟出select中选择一个元素的效果。
一:HTML
下面是我们在form表单里面用到的html代码:
- <fieldset class="radio-container">
- <div class="radio-options">
- <div class="toggle">Choose your beer</div>
- <ul>
- <li>
- <input type="radio" name="my-beer" id="choice1" value="choice1">
- <label for="choice1">Cul Dorcha</label>
- </li>
- <li>
- <input type="radio" name="my-beer" id="choice2" value="choice2">
- <label for="choice2">Rowers Red Ale</label>
- </li>
- <li>
- <input type="radio" name="my-beer" id="choice3" value="choice3">
- <label for="choice3">Belfast Ale</label>
- </li>
- <li>
- <input type="radio" name="my-beer" id="choice4" value="choice4">
- <label for="choice4">O'Hara Irish Stout</label>
- </li>
- </ul>
- </div>
- </fieldset>
二 : 逻辑草图
为了让讲解看起来更直观,我试着画了如下的草图来描述,希望表达清楚了。前端UI分享
三:CSS代码
为了让教程看起来更简洁,我省略了一部分视觉效果方面的CSS代码,(比如绘制箭头部分的CSS)-你可以在附件中查看完整版本的代码。基于同样的原因我还省略可针对不同浏览器的前缀。
radio-container的css:
- radio-container {
- position: relative;
- height: 4em; /* 3em (being the max-height of the inner container) + 1em ("margin") */
- }
- .radio-container:hover {
- z-index: 9999; }
包含在radio-container里面的元素的css: 前端UI分享
- .radio-options {
- position: absolute;
- max-height: 3em;
- width: 100%;
- overflow: hidden;
- transition: 0.7s;
- }
- .radio-options:hover {
- max-height: 100em;
- }
然后
- .radio-options .toggle {
- position: relative;
- cursor: pointer;
- padding: 0.75em;
- background: darkgreen;
- border-radius: 10px;
- z-index: 1; }
- * li are stacked at the same position as .toggle, only .toggle is visible */
- .radio-options li {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- .radio-options label {
- display: block;
- opacity: 0;
- transition: 0s; }
为了隐藏了input,我们可以用display : none达到目的,但是这种方法在某些浏览器(比如一些移动浏览器)下点击label起不到聚焦相关input的作用。 前端UI分享
- .radio-options input {
- position: absolute;
- top: 0;
- left: 0;
- width: 300px;
- height: 3em;
- opacity: 0;
- z-index:1;
- cursor: pointer;
- }
四 :鼠标移上去的css代码
根据上面的代码,我们来仔细看看hover上去时发生了什么,.radio-container的z-index为一个很大的值,同时.radio-options的max-height属性也变大了(为100em),我们继续:
- /* li elements have a normal flow within the .radio-options container */
- .radio-options:hover li {
- position: relative; }
- .radio-options:hover label {
- opacity: 1;
- transition: 0.5s; }
五:选中状态
To style the checked option we will use the general sibling selector. It uses a tilde character combinator (E ~ F) and matches elements that are siblings of a given element. The first element (E) has to occur before the second (F) one and they have to share the same parent (li items in our case).前端UI分享
If one of the radio is checked, we’ll see its label instead of the toggle :
- .radio-options input:checked ~ label {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- opacity: 1;
- /* is above the .toggle so is visible */
- z-index: 2;
- /* has tha same styles as .toggle */
- padding: 0.75em;
- background: darkgreen;
- border-radius: 10px; }
On hover it returns to the normal flow
- .radio-options:hover input:checked ~ label {
- position: static;
- border-radius: 0; }
六:移动设备上所需的修正
因为我们响应的是鼠标的hover事件,所以必须针对移动设备做响应(移动设备没有鼠标)。一种解决办法是将radio 的label始终可见。我先用用自定义的modernizr build来检测触摸设备,然后添加如下的脚本:
- $(document).ready(function(){
- if (Modernizr.touch) {
- $(".radio-options").bind("click", function(event) {
- if (!($(this).parent('.radio-container').hasClass("active"))) {
- $(this).parent('.radio-container').addClass("active");
- event.stopPropagation();
- }
- });
- $(".toggle").bind("click", function(){
- $(this).parents('.radio-container').removeClass("active");
- return false;
- });
- }
- })
在css中我如下修改每一个:hover的定义: 前端UI分享
- .no-touch .radio-container:hover, .active.radio-container {
- z-index: 9999; }
- .no-touch .radio-options:hover, .active .radio-options {
- max-height: 100em;
- }
- .no-touch .radio-options:hover li, .active .radio-options li {
- position: relative; }
- .no-touch .radio-options:hover label, .active .radio-options label {
- opacity: 1;
- transition: 0.5s; }
- ....
七:IE8下如何处理
是否兼容IE8取决于你自己,这部分并不是本教程的重点
- <!--[if (IE 8)]>
- <script>
- $(document).ready(function(){
- $(".radio-options li").bind("click", function() {
- $(this).siblings(".checked").removeClass("checked");
- $(this).addClass("checked");
- });
- });
- </script>
- <![endif]-->
css
- .radio-options .checked label {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- padding: 0.75em;
- background: #1b9e4d;
- visibility: visible;
- z-index: 2; }
- ....
教程结束,希望对你有所帮助,谢谢。
相关推荐
JS+CSS和图片美化select下拉列表选择框
这是一款效果超赞的jQuery和css3 select下拉列表框美化插件。该下拉列表美化插件没有使用图片,纯css和一点jQurey打造。共有5中不同的select下拉列表框效果。
一个带下拉模糊搜索的select,替换下拉内容后即可直接使用,只需要把对应文件放到指定文件夹中引用即可
纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框...
Select下拉列表框CssJavascriptCssJavascriptCssJavascript
超级极品,自己手册,有3中下拉框选择风格,苹果风格,描边风格,凹凸风格,好东西就是贵点
怎么自定义select下拉选择框的样式,使用纯CSS实现,把浏览器默认的样式覆盖掉还是有其他的方法,select靠纯CSS是不能解决这个自定义样式问题,下面为大家讲解下CSS实现的思路
青蛙实战之用JS+CSS和图片美化下拉列表选择框(select) 青蛙实战之用JS+CSS和图片美化下拉列表选择框(select)
jQuery+div+css模拟select自定义下拉列表框,简单轻巧实用。
NULL 博文链接:https://gerrard-ok.iteye.com/blog/2062250
select下拉框列表实现图片内容显示,$("#***").select()格式
CSS jQuery用ul模拟select下拉列表菜单效果,将表单中常用的Select列表框变换了样式,更加漂亮了,而且引入了jQuery,加上了动画效果,在下拉的时候,自动向下滑出,使Select不那么呆板了。
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 效果查看 源码下载 具体代码如下: <...
用CSS样式和JAVASCRIPT加图片组合的酷酷的select(下拉选择框)
下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;} h1{font-size:12px;color:#...
Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造,并通过Tether插件来进行下拉框的定位。
很好用的,以经过测试,非常好用!使用css实现,能方便的控制显示的位置!
Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造,并通过Tether插件来进行下拉框的定位。
包括相应的js,css文件,这些都是经过测试的。是没有问题的