jquery自定义一个下拉选择框效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery自定义一个下拉选择框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Lato"); body { font-family: Lato, Arial; color: #fff; padding: 20px; background-color: #e74c3c; } h1 { font-weight: normal; font-size: 40px; font-weight: normal; text-transform: uppercase; } h1 span { font-size: 13px; display: block; padding-left: 4px; } p { margin-top: 200px; } p a { text-transform: uppercase; text-decoration: none; display: inline-block; color: #fff; padding: 5px 10px; margin: 0 5px; background-color: #b83729; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } p a:hover { background-color: #ab3326; } .select-hidden { display: none; visibility: hidden; padding-right: 10px; } .select { cursor: pointer; display: inline-block; position: relative; font-size: 16px; color: #fff; width: 220px; height: 40px; } .select-styled { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #c0392b; padding: 8px 15px; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .select-styled:after { content: ""; width: 0; height: 0; border: 7px solid transparent; border-color: #fff transparent transparent transparent; position: absolute; top: 16px; right: 10px; } .select-styled:hover { background-color: #b83729; } .select-styled:active, .select-styled.active { background-color: #ab3326; } .select-styled:active:after, .select-styled.active:after { top: 9px; border-color: transparent transparent #fff transparent; } .select-options { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 999; margin: 0; padding: 0; list-style: none; background-color: #ab3326; } .select-options li { margin: 0; padding: 12px 0; text-indent: 15px; border-top: 1px solid #962d22; -moz-transition: all 0.15s ease-in; -o-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .select-options li:hover { color: #c0392b; background: #fff; } .select-options li[rel="hide"] { display: none; } </style> </head> <body> <h1>Custom Select <span>Without Plugin</span></h1> <!-- TO DO: 1. Add icons to List 2. Toogle opened state --> <select id="mounth"> <option value="hide">-- Month --</option> <option value="january" rel="icon-temperature">January</option> <option value="february">February</option> <option value="march&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0