Question

有没有人知道为所有输入隐藏默认样式的好方法，例如文本，文本区域，范围，单选按钮/复选框等？

我通常在我的项目中包含以下代码：

CSS

input[type="text"],
input[type="email"],
input[type="url"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

对于诸如text，teaxtarea和select之类的输入而言，它们很有用，但其他的呢？

我通常会将以下代码用于收音机和复选框：

CSS

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
appearence: none;

但这真的是最好的方式吗？

最后到Range，这是我通常会使用的：

CSS

input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type=range]:focus {
    outline: none; /* Removes the blue border. Not great for accessibility. */
}

辅助

从设计的角度来看，当你专注于输入时，没有多少人喜欢你得到的默认轮廓，我更喜欢其他人用项目设计相应地设计轮廓样式。最好的方法是什么？

Answer 1

您几乎拥有所需的一切，至少对于桌面浏览器而言。

对于iOS文本框，您需要添加一些额外内容：

input[type="text"],input[type="email"],input[type="url"],textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none; //important!
    border: none;
}

对于单选按钮，除了3d，视口和动画之外的目的使用CSS转换可能被认为是不好的做法。人们可以平均的形式逃脱它;然而，如果在低端设备上观看，那么如果有大量输入，则会发现存在巨大的延迟。这是由于CSS3使用图形加速。如果使用正确，硬件加速通常是一件好事。例如，3d视口动画。它们在加速时具有较少的滞后，因为所有DOM树/层都形成向量并发送到图形卡。要意识到计算机有显卡，但随着越来越多的人使用平板电脑等，显卡并没有那么多的荣耀。 无论如何， 这里应该为无线电做些什么，这也是更多的跨浏览器（CSS2）：

input[type=radio] {
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('radio.png') no-repeat 0 0;
  line-height  : 24px;
}

使用负边距正填充技巧，您可以将旧的无线电控制从边缘推出并使用背景图像。请务必使用<label>！确保它们在所有浏览器上都可以点击。

我得到的全部，真的有很多方法，我的回答肯定不是确定的。

享受！

不显示默认输入样式的最佳方法是什么？

1 个答案: