1

我想做这个

在此处输入图像描述

这是表单的选择下拉菜单

我的代码是

HMTL

<select>
                        <option>Country</option>
                        <option>India</option>
                        <option>USA</option>
                    </select>

CSS

select{
    width:197px;
    height:45px;
    border:solid 1px #13669b;
    box-shadow:0 5px 2px 0px rgba(0,0,0,0.06) inset;
    background:rgba(256,256,256,0.7);
    color:#13669b;
    font-size:16px;
    font-family: 'LatoBold';
    padding:0 14px;
    line-height:45px;
}

我想要这个只有纯 css。如何？

4

4 回答 4

2

没有办法用纯 css 创建一个像这样的下拉框（还）。

您可以创建自己的 js/css 下拉插件或使用现有的众多 jQuery/css 插件之一。

于 2012-06-12T08:15:53.717 回答
1

我不确定是否有简单的跨浏览器方式来做到这一点，但如果你结合 CSS + jQuery，你可以让它在所有正在使用的浏览器中工作：

请参阅有关如何操作的教程并修改 CSS 以获得所需的外观。

截屏：

在此处输入图像描述

于 2012-06-12T08:12:02.410 回答
0

此解决方案适用于纯 CSS，但与 Chrome 相关。请参见以下示例：

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

没有尝试将-webkit前缀替换为-moz一个前缀以使其与 Firefox 浏览器兼容，它实际上可能也可以工作，你应该试一试。

于 2012-06-12T08:37:45.503 回答
0

下拉菜单在不同浏览器中的实现方式不同，并且样式未得到广泛支持。这是有原因的。一方面：考虑 iPad/iPhone 上的下拉菜单。它们的工作方式与桌面应用程序下拉菜单完全不同。

如果你想要一个样式化的下拉菜单，你必须自己用列表和 javascript 构建它。或者使用众多可用的库之一（这进一步证明没有可用的纯 CSS 解决方案）。

于 2012-06-12T08:47:06.047 回答