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>
  • 相关阅读:
    Java异常：java.security.InvalidKeyException: Illegal key size
    sublime 3同步编辑线上代码
    ThinkPHP5浏览器关闭，继续执行php脚本
    jquery ui实现文字下拉联想
    layui实现多图上传，支持拖拽上传
    ThinkPHP5权限管理
    MySQL优化
    JS实现整个DIV里的字号整体放大或缩小
    JS实现点击图片放大、关闭效果
    sql 周岁计算
  • 原文地址：https://www.cnblogs.com/rubylouvre/p/4975070.html
Copyright © 2011-2022 走看看