带有 Knockout 下拉列表问题的边界半径

Posted 2023-03-05

【中文标题】带有 Knockout 下拉列表问题的边界半径

【英文标题】：Border-radius with Knockout drop-down list issue

【发布时间】：2014-08-07 23:42:59

【问题描述】：

尝试将边框半径添加到下拉剔除列表中，但只有“提交”才会接受。其他样式适用于所有。还尝试过 -moz 和 -webkit，并查看了样式和 css 绑定，但不确定如何正确应用。还尝试了“选择”上的 CSS 样式，它适用于除边框半径之外的所有样式。

<select data-bind="options: searchParameters, optionsText: 'name', optionsCaption: 'Select a Search', value: searchCanlii, css:  drop: on " ></select>
<select data-bind="options: citedNode, optionsText: 'name', optionsCaption: 'Select a Node', value: nodeID, css:  drop: on " ></select>
<button data-bind='click: submit, css:  drop: on '  >submit</button>


.drop 
    border-radius: 1px;
    background-color: rgba(107, 118, 108, 0.05);
    margin-left: 20px;
    border: 1px solid #cccccc;
    color: rgba(1, 73, 111, .7);
    font-family: 'Ovo', serif;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;   
    box-shadow: 4px 5px 0 rgba(150, 0, 0, 0.05);

jsbin

css: drop: on

来自Ivaylo Gerchev's article on KnockoutJS

【问题讨论】：

在样式中使用appearance:none; 解决（来自http://cssdeck.com/labs/styling-select-box-with-css3

您应该发布该评论（以充实的形式）作为答案。你会获得大量的名声和荣耀，可能还会获得一票或三票；）

【参考方案1】：

您不能将边框半径应用于<select> 元素。

绑定是正确的，这就是所有其他 css 属性都起作用的原因。

另外你发布的jsbin报错10个，错误会导致绑定失败，所以以后尝试解决问题时要小心，首先确保没有错误。

【讨论】：

其实我吃了我的话，我增加了边框半径，它似乎正在为我应用半径，我正在使用 chrome，也在 IE11 中尝试成功。

FF 有效，但 Chrome 似乎继续忽略。您使用 Chrome 的情况如何？

我查看了link，它使用了外观：无；我遇到并尝试过，但是在 Netbeans8 的 Chrome 查看器中添加了这个工作：-webkit-appearance:none; -moz-appearance:none; appearance:none;

我的 chrome 版本是：版本 35.0.1916.114 m