你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - Web前端 - 正文 代码,改变世界!

HTML中input的placeholder属性的CSS样式定义

2018-01-26Web前端墨初651°c
A+ A-

在HTML中input的有个placeholder属性,它可以让我们在写表单时给每个input的元素做个提示,让用户知道这个输入框什么作用,该输入什么样的数据,很是人性化,

但我们在定义input的placeholder属性时,它的默认样式本人感觉是非常的难看,为此我这个半调子的HTML代码君,百度了一下,找到了如何利CSS来给这个input的placeholder属性定义样式

利用css定义input的placeholder属性

html代码

<input type="text"  placeholder="UserName"  />

CSS代码:

input::-webkit-input-placeholder {
/* placeholder颜色  */
    color: #aab2bd;
/* placeholder字体大小  */
    font-size: 12px;
/* placeholder位置  */
    text-align: right;
}

CSS增强代码

HTML中input的placeholder属性的CSS样式定义

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#ddd;
}
input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#ddd;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#ddd;
}
input::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#ddd;
}
  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
HTML中input的placeholder属性的CSS样式定义

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录