zoukankan      html  css  js  c++  java

  • by 司徒正美

    <!DOCTYPE html> <html> <head> <title>by 司徒正美</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .dropdown{ position: relative; } .dropdown div{ position: relative; 200px; height:30px; border:1px solid rgb(228,228,228); overflow: hidden; } .dropdown div input{ 200px; height:30px; border: 0 none; padding-left:10px; position: absolute; top:0px; left:0px; z-index: 1; } .dropdown div .close{ position: absolute; 40px; height:30px; text-align: center; background: rgb(240, 240 240); border:1px solid rgb(228,228,228); line-height: 30px; color:rgb(228,228,228); z-index: 10; right:0px; top: 0px; } .dropdown select{ -webkit-appearance: none; -moz-appearance: none; position: absolute; border:1px solid rgb(228,228,228); top: 30px; left: 0px; z-index: 0; 200px; display: none; } .dropdown select:focus{ border:1px solid rgb(228,228,228); } .dropdown.focus select{ display: block; z-index: 2; } .dropdown select option{ padding-top:5px; 200px; height:30px; line-height: 30px; padding-left: 10px; } </style> <script src="jquery.js"></script> <script> $(function () { $(".close").click(function () { if ($(".dropdown").hasClass("focus")) { $(".dropdown").removeClass("focus") } else { $(".dropdown").addClass("focus") } }) $(".dropdown select").change(function () { $(".dropdown input").val($(this).val()) $(".dropdown").removeClass("focus") }) }) </script> </head> <body> <div class="dropdown"> <div><input placeholder="选择服务类型" readonly><span class="close">X</span></div> <select multiple> <option>1111</option> <option>2222</option> <option>3333</option> <option>4444</option> </select> </div> </body> </html>
  • 相关阅读:
    c语言：猴子吃桃问题
    c语言：输入任意数求该数的阶乘
    （整理三）高并发架构思路，附十万定时任务执行解决方案
    （整理4）RPC服务和HTTP服务简单说明
    .NET Core和Swagger 生成 Api 文档转
    （整理二）读取大日志文件
    （整理一）理解分布式事务,高并发下分布式事务的解决方案-附索引的利弊
    2016年结
    2013年结
    2017年结
  • 原文地址：https://www.cnblogs.com/rubylouvre/p/4975070.html
Copyright © 2011-2022 走看看