开发者社区> grootzhang> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

简介: 前言:   都说程序员有三宝:人傻,钱多,死得早。博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的。朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提并行,岂不快哉。
+关注继续查看

前言:

  都说程序员有三宝:人傻,钱多,死得早。博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的。朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提并行,岂不快哉。咳,话题扯得有点远,今天博主给大家写一篇关于css如何设置select、radio 、 checkbox 、file样式的问题,这里不涉及模拟框,仅介绍原生情况下如何做到自定义样式,废话不多说,赖次够!

1.select与input file:

  相信大家都遇到过这样的问题,大多数浏览器select选择框不能被直接修改样式,实在是不够美观,先看一下代码:

    <style type="text/css">
            #box{ width: 500px; margin: 50px auto;}
            #box select{ width: 200px; height: 30px; border: 1px solid red;background: green;color: #ffffff;}
        </style>
        <div id="box">
            <select name="xuanxiang">
                <option value="">选项一</option>
                <option value="">选项二</option>
                <option value="">选项三</option>
            </select>
        </div>

这里把select设置成宽度200px,高度30px,边框红色,背景绿色,文字白色;

咱们来看看各大浏览器的显示效果;

 

博主的win10系统闹小情绪了,ie打不开 将就一下,总之我们可以看到,它最大的问题是右边的箭头,各有特色,另外弹出的框样式也各不相同。

怎么样屏蔽浏览器自带的效果呢,楼主有一个小技巧教给大家,支持ie8及以上的浏览器。(e6是什么?可以吃吗?)。

利用css中的“七层重叠法”,即网页内容先后顺序分别为:背景边框 , 负值z-index , display:block , 浮动 , display:inline-block , z-index:auto , 正值z-index,

越往后在网页中的层级越靠前,也就是说如果一个z-index值为1或者更高的话 它会遮挡掉他之前的所有元素。

利用这个法则以及opacity设置透明度,可以模拟一个样式,这个样式是自定义的。看下面的代码

    <style type="text/css">
            #box{ width: 500px; margin: 50px auto; position: relative; }
            #box select{ width: 200px; height: 30px; position: relative; z-index: 1;  opacity: 0; } 
            .selectbg{position: absolute; left: 0;top: 0; width: 200px; height: 30px; border: 1px solid red;background: green;color: #ffffff; z-index: -1; line-height: 28px;text-indent: 10px; }
        
        </style>
        <div id="box">
            <select name="xuanxiang">
                <option value="">选项一</option>
                <option value="">选项二</option>
                <option value="">选项三</option>
            </select>
            <div class="selectbg">选项一</div>
        </div>

注意的几个技巧:

  ① select透明度设置成0,而z-index是1。

  ② div被定位在box的左上角而select默认位置就是左上角 所以他们发生了重叠,因为select的透明度是0,它是被隐藏了,但实际上它是在最上层的;

看看这么做的效果:

nice 几款浏览器显示一致。此刻显示的是class名为selectbg的div层,而点击的则还是select;

这段代码还有几个问题,选择后怎么使div文字跟随改变?

 

改进一下上面的代码,这里需要用到一点儿js代码了:

<style type="text/css">
            #box{ width: 200px;height: 30px; margin: 50px auto; position: relative; }
            #box select{ width: 100%; height: 100%;position: absolute; left: 0;top: 0; z-index: 1;  opacity: 0; } 
            .selectbg{position: absolute; left: 0;top: 0; width: 100%; height: 100%; border: 1px solid red;background: green;color: #ffffff; z-index: -1; line-height: 28px;text-indent: 10px; }
            #box select option{ font-size: 12px; text-align: center; color: #666666; padding: 5px;}
        </style>
        <div id="box">
            <select name="xuanxiang">
                <option value="">选项一</option>
                <option value="">选项二</option>
                <option value="">选项三</option>
            </select>
            <div class="selectbg">选项一</div>
        </div>
            
        <script type="text/javascript">
            var oSelect = function(){
                $("select").on("change",function(){
                    $(this).next(".selectbg").html($(this).find("option:selected").text()); //$(this).find("option:selected").text() 意为获取select选中的值 设置给selectbg
                });
            }
            oSelect();
        </script>

首先,将select也设置为绝对定位,box则接管背景与select的高宽设置;然后给select完成了它应该有的功能;

顺便设置了下option的样式,但是这个设置在谷歌中没有并没有想要的结果。聊胜于无吧。

 

总结select:

  你可以任意修改select的面板部分样式,这是一个好消息。但是option部分,无法修改。但option部分一般不那么重要,在移动端原生甚至体验会更好;

 

input file

  
  依旧是根据上一个思路,文件上传框可以变得更直白美观;上代码:

<style type="text/css">
    *{ padding: 0; margin: 0;}
        .fileloding{ position: absolute; opacity: 1; width: 0%;transition: opacity 500ms;-webkit-transition: opacity 500ms;-ms-transition: opacity 500ms;-moz-transition: opacity 500ms;-o-transition: opacity 500ms;  bottom: -15px; height: 15px; background:#90C0F5 ;}
        .uploadbox{ width: 150px;height: 150px; position: relative; margin: 100px;}
        .uploadbox input[type=file]{ cursor: pointer; position: absolute; width: 100%; height: 100%; z-index: 2; opacity: 0; filter: alpha(opacity=0);}/*设置file框在最上层*/
        .uploadbox .uploadbox-bg{ display: block;  width: 100%; height: 100%;  position: absolute; z-index: 1; background: #dfdfdf; border: 1px solid #cccccc; }/*设置模拟样式*/
        .uploadbox .uploadbox-bg p{font-size: 80px; color: #999999;text-align: center;}
        .uploadbox .uploadbox-bg span{ display: block; width: 100%; text-align: center; line-height: 15px; font-size: 14px; color: #666666;}
        .uploadbox:hover .uploadbox-bg p,.uploadbox:hover .uploadbox-bg span{ color: #90C0F5;}
        
    </style>
    <body>
        
        <div class="uploadbox">
            <input type="file" id="uploadbox" value="上传" />
            <input type="hidden" name="filepath" id="filepath" value="" />
            <div class="uploadbox-bg">
                <p>+</p>
                <span>点击上传</span>
            </div>
        </div>
    </body>

一个不难看的图片上传;

  原理相同,有兴趣的同学拿下去测试;

2.radio与:checkbox

  网页中还有哪几个不能修改的?

     还要radio和checkbox 单选与复选框;如果你用上面的方法,它一样可以被模拟,只是,它还有一个label标签可以做做文章,将它写到label标签中,点击label域则会选中它;

</style>
    <style type="text/css">
        #box{ position: relative; }
        #box label input{ position: absolute; left: 0; top: 0; z-index: -1; }
        .rediobg{ background: #ffffff;}
        #box label.active .rediobg{ background: red;}
    </style>
        <div id="box">
            <label>
                <input type="checkbox" name="" id="" value="" />
                <div class="rediobg">
                    点个赞呗
                </div>
            </label>
            
            
        </div>
        <script type="text/javascript">
            $("label").on("click",function(){  //点击label 
                var _in = $(this).children("input");    
                if(_in[0].checked){                    //判断当前的checkbox 如果选中则给当前label添加一个classname
                    $(this).addClass("active");
                }else{                                //如果没选中则移除
                    $(this).removeClass("active");
                }
            });
        </script>

需要判断checkbox的选中状态,然后改变div的样式;

 

效果出来了 nice;

 

3.总结

  写到这里,博文结束了。但是学习的路永远都走不到尽头,希望大家一起共同学习,探讨,有任何疑问在评论区回复即可;  夜深了,博主也是困得要紧,睡觉去也。

 

 

---------------------------------------我最嫉妒别人的是:他比我学的快---------------------------------------

 

  我的微信号:    qq:

 欢迎各种技术讨论,如果您有建站需求,欢迎联系;

 (转载请注明出处)

======================================================== 转载请注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《HTML 5+CSS 3入门经典》——1.1 HTML的历史
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第1章,第1.1节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1123 0
HTML/CSS 常用单词整理
页面布局(layout) header 头部/页眉; index 首页/索引; logo 标志; nav/sub_nav 导航/子导航; banner 横幅广告; main/content 主体/内容; container/con 容器; wrappe...
1051 0
HTML/CSS 知识点
整个前端开发的工作流程 产品经理提出项目需求 UI出设计稿 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据) 前后台的交互 测试 产品上线(后期项目维护) 互联网原理 当用户在浏览器输入网址的时候,就会发送到对应的服务器,请求该网址对应...
1103 0
+关注
grootzhang
我是张泰峰,从事开发工作,目前在一家跨境电商担任高级开发工程师
37
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载