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>
  • 相关阅读:
    HTML DOM 教程Part5 [DOM 冷门对象] 摘录自W3C School
    Javascript DOM 的节点操作示例
    CSS 教程Part2 [背景、文本、字体]（摘录自 W3C School）
    Stream Part.1
    Thread.Join() 方法
    CSS 教程Part3 [列表、表格、轮廓]（摘录自 W3C School）
    使用委托异步调用方法让程序并行运行
    JSON 数据格式
    C# WinForm 程序中获取本机IP地址
    微软示例代码 for ManualResetEvent
  • 原文地址：https://www.cnblogs.com/rubylouvre/p/4975070.html
Copyright © 2011-2022 走看看