Question

如何组合选择器？我想隐藏数字和日期字段中的箭头

<input type=number>
<input type=date>

我发现以下代码适用于单个字段：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

但是现在我想在一些代码中添加type = date但似乎无法将它们组合在一起并且无处不在如何去做但却无法找到。我怀疑它是非常简单的，如下所示，但这不起作用。

input[type=number][type=date]::-webkit-inner-spin-button, 
input[type=number][type=date]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

我知道有使用ID的解决方法，但是因为我正在学习CSS，所以我想知道如何在单个代码字符串中组合[type = date]和[type = number]。有人有什么想法吗？

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		margin: 0;
    }

<input type=number>
<input type=date>

Answer 1

您尝试的解决方案将仅定位同时具有type = number和type = date的输入。这样就不会起作用你需要type = number OR type = date，遗憾的是以下是唯一的方法。

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button, 
input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

顺便说一下，-webkit-inner-spin-button是一个webkit专有的伪元素，所以它不能在其他浏览器中工作。具体来说，-moz-appearance行完全是多余的！

Answer 2

你可以像这样申请css：

＆＃13;

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

＆＃13;

<input type=number>
<input type=date>

＆＃13;

如何将属性选择器组合到与其中一个匹配的元素？

2 个答案: