Question

我正在尝试将焦点上的占位符文本的颜色更改为白色。您可以查看联系表单here.

我尝试了不同的CSS代码，但是大多数代码在不同的浏览器上看起来并不相同+我已经做了一些研究，现在我可以看到在使用占位符设置样式时存在一些限制CSS。

我的问题是，我可以使用JavaScript将占位符颜色更改为焦点白色吗？我对编写JavaScript并不熟悉，但感谢任何帮助

Answer 1

相信您需要供应商前缀（来自css-tricks.com）：

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

使用javascript，你只会在焦点事件上以编程方式应用类似的样式（使用供应商前缀）。

编辑：事实上，我认为这些样式可以使用javascript来应用。您需要创建一个类并使用js来应用它。

CSS：

input.placeholderred::-webkit-input-placeholder {
   color: red;
}

JQuery的：

var $textInput = $('#TextField1');
$textInput.on('focusin',
    function () {
         $(this).addClass('placeholderred');
    }
);

$textInput.on('focusout',
    function () {
         $(this).removeClass('placeholderred');
    }
);

JS：

var textInput = document.getElementById('TextField1');
textInput.addEventListener('focus',
    function () {
         this.classList.add('placeholderred');
    }
);

textInput.addEventListener('blur',
    function () {
         this.classList.remove('placeholderred');
    }
);

礼貌的最有帮助的，Armfoot，一个小提琴：http://jsfiddle.net/qbkkabra/2/

Answer 2

这只适用于css和html

CSS

input::-webkit-input-placeholder {
color: #999;
}
input:focus::-webkit-input-placeholder {
color: red;
}

/* Firefox < 19 */
input:-moz-placeholder {
color: #999;
}
input:focus:-moz-placeholder {
color: red;
}

/* Firefox > 19 */
input::-moz-placeholder {
color: #999;
}
input:focus::-moz-placeholder {
color: red;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
color: #999;
}
input:focus:-ms-input-placeholder {
color: red;
}

和html

<input type='text' placeholder='Enter text' />

使用JavaScript更改焦点上占位符文本的颜色

2 个答案: