7

我正在尝试找到一种方法来创建具有满足要求的自定义设计的跨浏览器（所有主要浏览器）选择标签：

  • 使用几行代码
  • 跨浏览器
  • 快速（用户看到页面后 1-2 秒内不加载）
  • 易于复制

我发现一些只在 Firefox 和其他使用 webkit 但与其他样式混淆的作品。然后我开始煎一些脑细胞来检查我的选择。我尝试了这些：

第一种解决方案

使用仅具有 css 的图像作为背景，但在活动时我无法删除chrome上的边框。由于-webkit-appearance: none;箭头被移除（这很好），但我不能在firefox上做到这一点。

第二个解决方案

尝试在jquery 的帮助下替换/使用select 作为 div ，有些人建议使用bulgaria 上的一些人制作的这个插件，这看起来很棒，但我仍然认为它太花哨了。

第三个解决方案

在选择的顶部添加一个 span/div 标签。我花了一些时间在这个上，但我自己无法做到。发现1 年前的一个问题，关于我在尝试实现时遇到的一个问题，即模拟对选择标签的点击（就像用户点击了一样）。最后我决定穿制服。尽管他们的插件超出了我的需要，但它也适合解决问题。

第一个解决方案根本无法解决我的问题（可能是错误的方法或 css 代码）。第二和第三使用了太多的代码行（插件和所有）。还有其他我没有想到的方法或符合所有要求的方法吗？

4

2 回答 2

3

Formalize是一个相当简洁明了的插件。是的，它依赖于 jquery，但假设站点的架构是高质量的，它不会影响 .js 文件第一次缓存后的呈现。

如果您的网站大量使用 ajax 来交付页面内容，则可以完全避免任何预先准备好的无样式内容。

于 2012-04-18T22:00:43.527 回答
2

嘿，你可以这样做

CSS

label.custom-select {
    position: relative;
    display: inline-block;

}

    .custom-select select {
        display: inline-block;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #000;
        color:white;
        border:0;
    outline:none;
    }




    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 10px;
        background: green;
        color: white;
    }

    .no-pointer-events .custom-select:after {
        content: none;
    }

HTML

<label class="custom-select">

    <select>
        <option>Sushi</option>
        <option>Blue cheese with crackers</option>
        <option>Steak</option>
        <option>Other</option>
    </select>
</label>

现场演示http://jsfiddle.net/rohitazad/XxkSC/555/

于 2012-04-19T08:17:05.820 回答