Question

我想更改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。

Answer 1

我认为你不应该这样做。根据我的经验，你不应该只使用默认值并使用它们最好的解决方案是设置自己的关于边框样式，悬停，焦点和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;

我没有尝试这种方法，但为了保留默认值，这应该是算法。我的意见再次是为所有人设置默认边框。

更改输入背景而不更改默认边框

1 个答案: