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>
  • 相关阅读:
    Webservice详解
    Spring IOC/DI和AOP原理
    MySQL 使用JOIN优化子查询
    MySQL 更新语句技巧
    MySQL插入语句解析
    MySQL用户无法登陆问题
    MySQL基础学习（二） 常用SQL命令
    Servlet/JSP-08 EL表达式
    插值和空间分析（一）_探索性数据分析（R语言）
    爱重启的windows，伤不起
  • 原文地址：https://www.cnblogs.com/rubylouvre/p/4975070.html
Copyright © 2011-2022 走看看