html - 你如何用谷歌的CSS格式化下拉菜单？

Question

我正在使用

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

使用 HtmlService 格式化在 google 电子表格脚本中提供的 html。这格式化了一个“选择”输入元素，但下拉菜单似乎仍然是系统默认设置。有解决办法吗？

如果您在 google 电子表格中使用带有下拉列表的自定义范围的数据验证，则实际的下拉列表也会被格式化。

如何在我的 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>

请注意，电子表格的 google 格式下拉菜单是方形的，在选择器下方，代码片段生成一个 google 格式的下拉菜单，但实际的下拉菜单由您的操作系统默认设置格式并显示在选择器顶部。

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>