您的位置：首页 > 其它

如何实现select前台效果

2016-11-19 19:12 169 查看

引言

 

       如何和公司的设计师交流甚多，才知道，公司的设计师，真的是“牛牪犇”，非但如此，他们的眼睛也是犀利到不

行，真的是“1px”必争啊！但也正是因为他们，所以前台确实收获挺多，毕竟前台一直是我的弱项，如今，js，css，

jQuery信手拈来。下边以select的前台效果实现的demo说明一下。

select成长记

       先来看看最简单的select是什么效果的~~~



       在我们看来，毫无问题啊~~~然而设计师不这么想，且看select的成长记。

       设计师要求字体颜色是灰色色调#cecece，并且字体向左移动6px左右的距离。很简单，做吧~~~效果图：



        嗯，向左移动了6px，并且颜色也改了，但是现在有一个问题，就是select的所有字体颜色都是灰色，及时选择了

也还是灰色，所以设计师说：选择了之后变成黑色。嗯，还好，可以解决。效果：



        但是现在设计师说，这不行啊，如果说选择默认的，还需要变回灰色啊，啊，啊，啊。。。好吧~照办！效果：



        到此，我的select效果基本都出来了，虽然几经波折，但是代码确实很简单的，看看吧~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
select{
width:200px;
height:30px;
color:#cecece;
padding:6px 12px;
}
</style>
</head>
<body>

<select id="myselect">
<option value="default">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="myselect2">
<option value="default">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

</body>
<script type="text/javascript">
$("select").on("click",function(){
if($(this).val()=="default"){
$(this).css("color","#cecece");
}else{
$(this).css("color","black");
}
});
</script>
</html>           

总结

        这种跟设计的沟通过程中，发现，自己还是需要点强迫症的，眼里揉不得沙子有点太过了，但是这种基本的对审

美的要求还是要有的。相信经过在长城的这段学习时间，我的前台修养会大大的进步。。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航