select標籤美化

時間 2019-12-07

標籤 select 標籤美化简体版

原文原文鏈接

如今前端設計愈來愈受到重視,所以前端頁面各組件的美化也愈來愈重要。javascript

本文重點講的是前端比較難優化的一個組件<select>css

一初級美化html

只進行select框及下拉箭頭的美化，單純的用css美化option選項比較難。前端

（）-----這是上述案例中用到的下拉箭頭。java

上述案例效果圖以下：jquery

下面是實現代碼：git

<!DOCTYPE>
<html>

<head>
    <style>
        .filter-box {
            width: 240px;
            height: 34px;
            background-color: #ffffff;
            border: solid 1px #dcdcdc;
            font-family: Roboto;
            font-size: 12px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            letter-spacing: normal;
            text-align: left;
            color: #3d3d3d;
            padding-left: 10px;
            border-color: #dcdcdc;
            -webkit-appearance: none;
        }
        
        select {
            background-image: url(backdropdown.png);
            background-position: 222px 9px;
            font-family: Roboto;
            font-size: 12px;
            color: #3d3d3d;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <select class="filter-box">
          <option value="選擇1" selected="selected">Connecticut</option>
          <option value="選擇2">New York</option>
          <option value="選擇3">Maryland</option>
          <option value="選擇4">Virginia</option>
        </select>
</body>

</html>

View Code

2、高級美化github

高級美化說的通俗一點就是讓下拉選項好看再好看，實際上是重寫覆蓋，原來的select隱藏。web

引入bootstrap（bootstrap官網或百度皆可）、bootstrap-select插件（官網：http://silviomoreto.github.io/bootstrap-select/），支持單選、多選以及各類事件操做。ajax

先上效果圖：

下拉箭頭若是須要更換的話，仍然可使用上面代碼中更換方式更換。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> Bootstrap</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <script src="#{facesContext.externalContext.requestContextPath}/2018/js/scheduling/multiSelect.js?version=1" type="text/javascript"></script>

</head>

<body>
    <select class="selectpicker show-tick">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
          </select>

    <select class="selectpicker" multiple data-selected-text-format="count">
                <option>Mustard</option>
                <option>Ketchup</option>
                <option>Relish</option>
              </select>
</body>

</html>

View Code

PS：JSF中引用的坑

本人在開發過程當中遇到了一個折磨了我大半天的坑，我是在JSF中引入的bootstrap-select，引入過程還及其順利，修改樣式達到與總體兼容協調。但測試過程當中問題出現了，當我打開二級頁面而後回到當前頁面後，引入bootstrap-select的效果失效，即給人的感受是引用徹底消失了。看代碼發現二級頁面關閉以後使用render選項，只刷新了select組件所在的模塊。通過多出查找最後從bootstrap-select 的Git hub上發現這樣一句話：

If you use an older version, you need to add the following either at the bottom of the page (after the last selectpicker), or in a $(document).ready() block.

// To style only <select>s with the selectpicker class
$('.selectpicker').selectpicker();
Or

// To style all <select>s
$('select').selectpicker();

忽然感到柳暗花明（果斷star這個Git hub：https://github.com/silviomoreto/bootstrap-select），意思大概就是這個select效果是Dom加載完成以後，再執行js方法加載的select效果。而我使用render以後，所在模塊只是加載了dom組件，並無再執行js。所以我在render的模塊最下方加入這樣一段代碼：

 <script>
    $('.selectpicker').selectpicker();
 </script>

由於這段代碼在render的模塊中，所以也會執行這句js，這樣二級頁面關閉以後，select效果仍然存在。附一張個人項目中效果圖收尾。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

select標籤 美化

select標籤美化