Question

我正在使用

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

使用HtmlService格式化google电子表格脚本中提供的html。这格式化＆＃34;选择＆＃34;输入元素，但下拉菜单似乎仍然是系统默认值。有办法解决这个问题吗？

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

如何在我的html文件中复制此效果？

供参考，请参阅此spreadsheet和此代码：

＆＃13;

<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>

＆＃13;

请注意，电子表格的Google格式下拉列表是方形的，在选择器下方，代码段会生成一个谷歌格式的下拉列表，但实际的下拉菜单会根据您的操作系统默认值格式化，并显示在选择器。

Answer 1

您不能仅使用css执行此操作，还需要使用js。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何使用google的css格式化下拉菜单？

1 个答案: