input placeholder属性样式修改(颜色,大小,位置)

Love The Way You Lie 2022-01-31 14:04 499阅读 0赞

# [input placeholder属性 样式修改(颜色,大小,位置)][input placeholder_] #

placeholder属性 样式修改

# placeholder-style="font-size: 2upx; color: red;" #

![复制代码][copycode.gif]

1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>
     6     <style>
     7     
     8     input::-webkit-input-placeholder {
     9         /* placeholder颜色  */
    10         color: #aab2bd;
    11         /* placeholder字体大小  */
    12         font-size: 12px;
    13         /* placeholder位置  */
    14         text-align: right;
    15     }
    16     input {
    17         border: 1px solid red;
    18     }
    19     </style>
    20 </head>
    21 <body>
    22     
    23     <input type="text" placeholder="请输入手机号">
    24     
    25 </body>
    26 </html>

![复制代码][copycode.gif]

显示结果:

![1003856-20161207164526851-1053142276.png][]

备注:

![复制代码][copycode.gif]

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color:    #909;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color:    #909;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color:    #909;
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
       color:    #909;
    }

![复制代码][copycode.gif]

[input placeholder_]: https://www.cnblogs.com/ooo0/p/6141764.html
[copycode.gif]: /images/20220131/edaf457c354e49a98cc6d34166ea12ea.png
[1003856-20161207164526851-1053142276.png]: /images/20220131/7c8d8913161f4466a8685c410ef97de9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，499人围观）

还没有评论，来说两句吧...

相关阅读

相关修改placeholder样式

style> ::-webkit-input-placeholder \{ /\* WebKit, Blink, Edge \*/ col...

刺骨的言语ヽ痛彻心扉/ 2024年04月17日 21:54/ 0 赞/ 68 阅读

相关 Element ui 修改el-input 的placeholder样式

/deep/.el-input__inner { &::placeholder { color: red;

曾经终败给现在/ 2023年01月02日 14:22/ 0 赞/ 202 阅读

相关输入框input 修改placeholder样式

::-webkit-input-placeholder { / WebKit, Blink, Edge / } :-moz-placeholder {

客官°小女子只卖身不卖艺/ 2022年12月18日 07:59/ 0 赞/ 185 阅读

相关 input修改placeholder样式、去掉点击时的边框样式

placeholder样式： input::-webkit-input-placeholder { font-size: 17px !importan

骑猪看日落/ 2022年12月04日 08:57/ 0 赞/ 214 阅读

相关 CSS - 改变 input 输入框 placeholder 的字体颜色大小

前言该方法只适用于 `pc` 端，移动端无效。代码 input::-webkit-input-placeholder { / We

小咪咪/ 2022年10月25日 04:49/ 0 赞/ 250 阅读

相关如何简单修改input的placeholder样式

在做项目的时候，尤其事表单的时候，有时候input的placeholder的颜色值有点重，让我们一眼看过去分不清到底是不是已经填写的，为了更加分明，我们就需要修改一下place

喜欢ヅ旅行/ 2022年06月02日 01:16/ 0 赞/ 512 阅读

相关修改input、textarea输入框placeholder样式

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

青旅半醒/ 2022年04月13日 14:54/ 0 赞/ 723 阅读

相关 HTML如何修改placeholder属性中文字颜色

今天在群里看到群友问了一个这样的问题，就是如何更改placeholder属性中文字的颜色，以前用过这属性，却是没更改过颜色，于是便试了试，中途遇到些问题，查找资料后特来总结一下

矫情吗；*/ 2022年03月19日 11:18/ 0 赞/ 374 阅读

相关 input placeholder属性样式修改(颜色,大小,位置)

[input placeholder属性样式修改(颜色,大小,位置)][input placeholder_] placeholder属性样式修改 placeho

Love The Way You Lie/ 2022年01月31日 14:04/ 0 赞/ 499 阅读

相关怎样修改【placeholder】里面文字的颜色、字体大小等一些属性呢

input::-webkit-input-placeholder { color: b9b9b9; / 更改placeholder的字体颜色 /

约定不等于承诺〃/ 2021年10月19日 07:16/ 0 赞/ 429 阅读