jq自定义select样式

来源：互联网发布：西安淘宝店铺培训班编辑：程序博客网时间：2024/05/19 22:03

<!DOCTYPE html>

<html><head><meta charset="utf-8" /><title>自定义下拉菜单select</title><link rel="stylesheet" type="text/css" href="css/select.css"/></head><body><div class="select"><p><input type=""/><span>选择列表</span></p><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></body><script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="js/select.js"></script></html>

*{padding: 0;margin: 0;border: 0;}ul{list-style: none;}/*下拉样式*/.select{

margin:0 auto;
 position: relative;display: block;width: 200px;height: 60px;border: 1px solid #000;font-size: 30px;text-align: center;line-height: 60px;}.select input{position: absolute;top: 0;left: 0;opacity: 0;}.select span,.select p{width: 100%;height: 100%;}.select li{display: block;font-size: 30px;width: 200px;height: 60px;text-align: center;background-color: #0000FF;color: #fff;}.select li:hover{background-color: #fff;color: #0000FF;border: 1px solid #0000FF;}.select ul{position: absolute;display: none;}

//下拉菜单相应demo相应$(".select p").click(function(){//点击显示下拉菜单$(".select ul").css('display','block');});$(".select ul li").click(function(){//点击获取下拉菜单相应值赋给input&&span方便传值$(".select input").val($(this).text());$(".select span").text($(this).text());$(this).parent().css('display','none');});

阅读全文

0 0