如何用css给input的placeholder设置颜色

我在做页面的时候遇到过这种情况,在input标签中有默认字,但是设计稿上的颜色和input标签中的placeholder的默认颜色不一致。虽然我们可以在js中写出,但是有点过于麻烦了。

所以我就用css来给它设置了一下(注意css中有可能存在兼容性问题,如果实在不行还得用js。不过一般要求不严可以用这个偷偷懒)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
        <style>
             #txt{
           height:100%;
          width:230px;
          font-size:12px;color:red;
        }
         #txt::-webkit-input-placeholder{
           color:red;
         }
        </style>
</head>
<body>
    <input type="text" id="txt" placeholder="请输入主题或关键词"/>
</body>
</html>

这样我们就可以用更少的时间做更多的事了。

时间: 2024-11-06 08:33:48

如何用css给input的placeholder设置颜色的相关文章

给input的placeholder设置颜色

::-webkit-input-placeholder { /* WebKit browsers */color: #999;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #999;}::-moz-placeholder { /* Mozilla Firefox 19+ */color: #999;}:-ms-input-placeholder { /* Internet Explorer 10+ */color: #999;}

css改变input输入框placeholder值颜色

::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; opacity: 1; } :-ms-input-placeholder { /* Inte

h5 中修改input中 placeholder的颜色

input::-webkit-input-placeholder{ color:blue; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:blue; } input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:blue; } input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:blue

[HTML] Change an HTML5 input&#39;s placeholder color with CSS

We will look at what CSS selectors to use to change an HTML5 inputs placeholder color. This can differ from browser to browser, so, we will make sure to cover all of the cases. /* Chrome, Opera, Safari */ ::-webkit-input-placeholder { color: #ff6600;

网页中如何用 CSS 设置打印分页符

Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p><div style="page-break-after:always;"></div><p>第 2 页</p><div style="page-break-after:always;"></div&g

设置PlaceHolder的颜色

input::-webkit-input-placeholder{ color:green; } input::-webkit-input-placeholder { color: #999; } input:-moz-placeholder { color: #999; } // css修改placeholder的颜色 ::-webkit-input-placeholder{ } :-moz-placeholder{ } ::-moz-placeholder{ } :-ms-input-pla

兼容ie的placeholder设置

html5的placeholder在ie上不被支持,解决的方法 直接在网页里添加 <!--兼容ie的placeholder--> <script src="static/js/placeholder.js"></script> 就可以了 // JavaScript Document (function($) { /** * Spoofs placeholders in browsers that don't support them (eg Fire

公司的一个面试题:如何用css让一个容器水平垂直居中?

原文:公司的一个面试题:如何用css让一个容器水平垂直居中? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .div1{ width: 100px; height: 100px; bo

如何用CSS控制字的间距

如何用CSS控制字的间距: 有时候默认的字间距并不能够满足实际需要,可能需要进行人为的控制,下面就简单介绍一下如何实现此效果. 使用letter-spacing属性即可以设置字间距.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com