html5+css3+jQuery下拉框美化

1、新建html文档。

3、书写css代码。<style>.searchable-select-hide { disp造婷用痃lay: none; }.searchable-select { display: inline-block; min-width: 200px; font-size: 14px; line-height: 1.428571429; color: #555; vertical-align: middle; position: relative; outline: none; }.searchable-select-holder { padding: 6px; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; min-height: 30px; box-sizing: border-box; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }.searchable-select-caret { position: absolute; width: 0; height: 0; box-sizing: border-box; border-color: black transparent transparent transparent; top: 0; bottom: 0; border-style: solid; border-width: 5px; margin: auto; right: 10px; }.searchable-select-dropdown { position: absolute; background-color: #fff; border: 1px solid #ccc; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding: 4px; border-top: none; top: 28px; left: 0; right: 0; }.searchable-select-input { margin-top: 5px; border: 1px solid #ccc; outline: none; padding: 4px; width: 100%; box-sizing: border-box; width: 100%; }.searchable-scroll { margin-top: 4px; position: relative; }.searchable-scroll.has-privious { padding-top: 16px; }.searchable-scroll.has-next { padding-bottom: 16px; }.searchable-has-privious { top: 0; }.searchable-has-next { bottom: 0; }.searchable-has-privious, .searchable-has-next { height: 16px; left: 0; right: 0; position: absolute; text-align: center; z-index: 10; background-color: white; line-height: 8px; cursor: pointer; }.searchable-select-items { max-height: 400px; overflow-y: scroll; position: relative; }.searchable-select-items::-webkit-scrollbar {display: none;}.searchable-select-item { padding: 5px 5px; cursor: pointer; min-height: 30px; box-sizing: border-box; transition: all 1s ease 0s; }.searchable-select-item.hover { background: #555; color: white; }.searchable-select-item.selected { background: #28a4c9; color: white; }</style>

5、代码整体结构。