在不更改默认边框的情况下更改输入背景

Change input background without changing default border

本文关键字：情况下 输入 背景 默认 边框      更新时间：2023-09-26

我想更改input[type=text]元素的背景图像和颜色，但当我更改这些时，边框也会更改。我想要原始的（依赖于浏览器的）边框。在IE中，它会是薄黑色，在Webkit中，它将是非常非常薄的灰色。在其他浏览器中可能会有所不同。

有没有一种方法可以在CSS或javascript中做到这一点？我在JS中设置属性，因为涉及到一些计算。下面是一个最小的工作示例：http://jsfiddle.net/nacho4d/k0oxsywp/1/

// <input type="text">
var input = document.querySelector('input');
input.style.backgroundColor = 'yellow'; // Some color calculated in js
input.style.backgroundImage = 'Some image I generate in js';
input.style.border = ??? // Restore browser default style.

注意：例如，在chrome中，默认的输入边框非常薄，我还没有找到复制它的方法。在IE中，它是border: thin solid black。

我认为你不应该这样做。根据我的经验，你不应该只放默认值并使用它们——最好的解决方案是设置你自己关于边框样式、悬停、焦点和e.t.的规则

如果您想保留默认边界，您应该在进行更改之前获得它。

以下是如何获得它的示例。

http://www.w3schools.com/jsref/prop_style_border.asp

// <input type="text">
var input = document.querySelector('input');
var borderStyle = input.style.border ;
input.style.backgroundColor = 'yellow'; // Some color calculated in js
input.style.backgroundImage = 'Some image I generate in js';
//and then when you change the background or what ever change are set it again
input.style.border = borderStyle;

我没有尝试这种方法，但为了保留默认值，这应该是算法。同样，我的观点是为所有人设置一个默认的边界。

相关文章：