使用jquery(.css方法)更改颜色后文本输入更改样式

时间:2013-12-10 07:40:12

标签: javascript jquery css

我正在尝试使用

更改文本输入字段的背景颜色

$('input[name=testname]').css({"background-color": "#ffffff"});

但之后文本框的样式发生了变化like this(右边的是更改后的样式)

似乎只发生在Firefox中,有解决方法吗?

修改:Example

第一个textinput的风格与第二个不同。 (不在Chrome中,只在Firefox 25.0.1中)This就是这里的样子。

编辑2:我更正了颜色,如果新颜色与旧颜色相同,甚至会发生这种情况。

2 个答案:

答案 0 :(得分:1)

这是一种非常奇怪的行为。我无法找到这个问题的根源......我可以找到默认输入字段的源代码(在其中更改),但找不到它的正常外观的css源代码。

<小时/>

解决方案1 ​​

但是我可以强制输入字段看起来像默认输入字段:

.changeBg
{
    background-color: white;

    border-radius: .18em;
    border-width: 1px;
    border-style: solid;
    border-top-color: #abadb3;
    border-left-color: #e2e3ea;
    border-bottom-color: #e3e9ef;
    border-right-color: #dbdfe6;

    padding: 2.23px;
}

.changeBg:hover
{
    border-top-color: #3d7bad;
    border-bottom-color: #b7d9ed;
    border-right-color: #a4c9e3;
    border-left-color: #b5cfe7;
}

我刚刚使用了一个改变css背景的类:

$('input[name=test]').addClass('changeBg');

请注意,这只是Firefox

的后备

jsFiddle

<强>更新

您可能希望使用@-moz-document url-prefix() { }仅针对此回退定位firefox。

jsFiddle

它似乎也发生在chrome上,只是普通的css


解决方案2

因为这不仅发生在firefox上,而且每个浏览器都有自己的标记,你也可以为每个浏览器创建一个输入标记。

这样您就不必为每个浏览器指定任何标记。

答案 1 :(得分:1)

默认情况下:所有表单元素都由用户代理(浏览器)样式表设置样式。如果您尝试覆盖元素的样式,则用户代理部分(观察到)或完全(可能)删除其样式表**。

只需将边框样式添加到元素到文本框,以保持不一致的外观。