你如何格式下拉菜單與谷歌的CSS？

Question

我使用

link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css

格式化HTML與HtmlService一個谷歌電子表格腳本服務。這會格式化「選擇」輸入元素，但下拉菜單似乎仍然是系統默認值。有沒有解決的辦法？

如果您在谷歌電子表格中使用自定義範圍w /下拉菜單的數據驗證，則實際下拉列表也會格式化。

如何在我的html文件中複製這種效果？

作爲參考，請參閱本spreadsheet和此代碼：

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> 
 

 
<select name="selector" id="demoSelector"> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
    <option>Option 4</option> 
 
</select>

注意，電子表格的谷歌格式下拉是正方形和選擇下，將代碼段生成一個谷歌-格式化下拉菜單，但實際的下拉菜單是由操作系統默認值格式化的，並出現在選擇器的頂部。

Answer 1

你不能用CSS來做到這一點，你也需要使用js。

以下是ddSlick的示例。 （有很多插件可以使用）

$('#demoSelector').ddslick().change(function() { 
 
    alert($(this).val()); 
 
});

.dd-select { 
 
    background: url(https://ssl.gstatic.com/ui/v1/disclosure/grey-disclosure-arrow-up-down.png), -moz-linear-gradient(top, #f5f5f5, #f1f1f1); 
 
    background: url(https://ssl.gstatic.com/ui/v1/disclosure/grey-disclosure-arrow-up-down.png), -ms-linear-gradient(top, #f5f5f5, #f1f1f1); 
 
    background: url(https://ssl.gstatic.com/ui/v1/disclosure/grey-disclosure-arrow-up-down.png), -o-linear-gradient(top, #f5f5f5, #f1f1f1); 
 
    background: url(https://ssl.gstatic.com/ui/v1/disclosure/grey-disclosure-arrow-up-down.png), -webkit-linear-gradient(top, #f5f5f5, #f1f1f1); 
 
    background: url(https://ssl.gstatic.com/ui/v1/disclosure/grey-disclosure-arrow-up-down.png), linear-gradient(top, #f5f5f5, #f1f1f1); 
 
    background-position: 95% 50%; 
 
    background-repeat: no-repeat; 
 
    border: 1px solid #dcdcdc; 
 
    -moz-border-radius: 2px; 
 
    -webkit-border-radius: 2px; 
 
    border-radius: 2px; 
 
    color: #333; 
 
    cursor: default; 
 
    font-family: arial, sans-serif; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    height: 29px; 
 
    margin: 0; 
 
    min-width: 72px; 
 
    outline: 0; 
 
    padding: 7px 19px 7px 4px; 
 
    text-align: center; 
 
    text-indent: .01px; 
 
    text-overflow: ellipsis; 
 
    text-overflow: ''; 
 
    white-space: nowrap; 
 
    padding:0; 
 
} 
 

 
.dd-option { 
 
    position: relative; 
 
    color: #333; 
 
    cursor: pointer; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 6px 30px 6px 8em; 
 
    white-space: nowrap; 
 
    border: none !important; 
 
    font-family: arial, sans-serif; 
 
    font-size:13px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/prashantchaudhary/ddslick/5c1eca60c927766ada5eb54b137ea6dd4ccffbea/jquery.ddslick.min.js"></script> 
 

 
<select name="selector" id="demoSelector"> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
    <option>Option 4</option> 
 
</select>