`

修改输入框placeholder文字默认颜色-webkit-input-placeholder

 
阅读更多

html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如:

<input type="text" placeholder="我爱北京" value=" ">

 默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决方案如下:

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #999999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #999999;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999999;
}

 

分享到:
评论

相关推荐

    修改输入框placeholder文字默认颜色-webkit-input-placeholder方法

    总结来说,修改HTML5输入框`placeholder`文本颜色主要通过CSS的特定选择器来实现,如`-moz-placeholder`、`-ms-input-placeholder`和`-webkit-input-placeholder`。通过正确使用这些选择器,可以确保在不同浏览器中...

    input 标签实现输入框带提示文字效果(两种方法)

    使用 `::-webkit-input-placeholder` 伪类,我们可以控制输入框中的提示文字样式,并使用 CSS3 的动画效果来实现提示文字的变换。 方法二:使用 JavaScript 实现带提示文字的输入框 如果我们想要在所有浏览器中...

    vue + el-input 中 textarea 实现 placeholder 换行

    在Vue.js项目中,由于`el-input`组件的封装,我们不能直接通过内联样式来修改其内部`textarea`的`placeholder`样式。因此,我们需要找到一种方式来覆盖Element UI的默认样式。一种常见的方法是使用`::v-deep`或`&gt;&gt;&gt;`...

    html5配合css3实现带提示文字的输入框(摆脱js).docx

    input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder { color: #c2c2c2; -webkit-transition: color 0.5s; } ``` 在上面的代码中,我们使用了 CSS3 的动画效果来实现输入框的颜色...

    输入框提示文字上浮

    - CSS方法:通过CSS样式调整输入框的`placeholder`属性,当输入框获得焦点时,改变提示文字的位置和颜色。例如,可以使用`:focus-within`伪类来实现。 - JavaScript/jQuery方法:利用JavaScript或jQuery监听输入框...

    网页内容placeholder占位特效.zip

    这里我们使用了WebKit私有属性`::-webkit-input-placeholder`来改变占位符的样式,对于非WebKit浏览器,可能需要使用其他方法,如`::placeholder`(部分浏览器支持)或者JavaScript库提供的解决方案。 总结来说,...

    HTML5 input placeholder 颜色修改示例

    1. WebKit和Blink引擎(例如:Chrome、Safari、Opera15+)使用的是`::-webkit-input-placeholder`伪元素。 2. Mozilla Firefox 4-18使用`:-moz-placeholder`伪类。 3. Mozilla Firefox 19+使用`::-moz-placeholder`...

    html中input提示文字样式修改的示例代码

    在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字。我们只需要在&lt;input&gt;标签里添加:placeholder="提示文字即可",那么如果要修改提示文字的样式呢?可以...

    谷歌和safari webkit独有css hack

    2. `::-webkit-input-placeholder`:这个伪元素选择器可以用来设置WebKit浏览器中输入框`&lt;input&gt;`的占位符文本的样式。 3. `display: -webkit-box;`:这是Flexbox布局的老版本,在WebKit中可以使用,但在新的标准中...

    H5 输入框的提示信息

    input:-webkit-input-placeholder { color: #999; } input::-moz-placeholder { /* Firefox 19+ */ color: #999; } input:-ms-input-placeholder { color: #999; } input::placeholder { color: #999; } ``` ...

    14种CSS3炫酷表单input输入框美化效果

    7. **placeholder样式**:CSS3可以修改`placeholder`文本的颜色、字体大小等,使其与正常输入内容区分开。 8. **验证错误提示**:使用伪类`:invalid`和`:valid`,结合自定义样式,可以在用户输入不合法时立即反馈...

    html5配合css3实现带提示文字的输入框

    input[type="text"]::-webkit-input-placeholder { /* Webkit浏览器支持 */ color: #999; } input[type="text"]:-moz-placeholder { /* Firefox 18及以下 */ color: #999; } input[type="text"]::-moz-placeholder...

    css苹果手机去掉input样式

    为了统一不同平台下输入框的显示效果,我们可以利用CSS中的`-webkit-appearance`属性来去除苹果手机上输入框的默认样式。该属性是WebKit内核浏览器特有的CSS属性,主要用于控制表单控件的外观。具体地,可以设置其值...

    html5配合css3实现带提示文字的输入框(摆脱js)

    在Webkit浏览器(如Chrome、Safari)中,我们可以使用`::-webkit-input-placeholder`伪元素来选择并修改`&lt;input&gt;`标签内的占位符文本样式。以下是一个示例: ```css input::-webkit-input-placeholder { color: #...

    制作漂亮的输入框

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; opacity: 0.7; } :-moz-placeholder { /* Firefox 18- */ color: #999; opacity: 0.7; } ::-moz-placeholder { /* Firefox 19+ */ ...

    移动端开发资料1

    至于表单输入框`placeholder`的颜色,可以使用Webkit特定的选择器来改变: ```css input::-webkit-input-placeholder { color: #AAAAAA; } input:focus::-webkit-input-placeholder { color: #EEEEEE; } ``` ...

    6位验证码输入框.zip

    对于隐藏光标的问题,这是因为微信小程序默认会显示输入框的光标,但在验证码输入框的场景下,我们通常不希望用户看到光标的移动。解决方法是在WXSS样式表中,为每一个输入框设置`cursor-spacing`属性为一个极大的值...

    移动端HTML5 input常见问题(小结)

    1. 去掉input 在iOS中的默认圆角和内阴影 iOS下 input会有自带的圆角和内阴影,去掉方法如下: input{ -webkit-appearance: none; border-radius: 0; } 2. 焦点在 input 时,placeholder 没有隐藏 input:focus:...

Global site tag (gtag.js) - Google Analytics