html input 字体颜色_input使用小技巧

①:如何修改placeholder样式?

aa163d7f857e7549429b201874046035.png
 input::-webkit-input-placeholder {
    color: #ccc;
    font-size: 15px;
    }

其它浏览器适配方案

1f029391416d2ea24f59eef4e742e68e.png

e94f1a41a40be05894b7e3cb0bb5482b.png

原文参考:https://webfem.com/post/placeholder


②:设置获取焦点后输入文字大小的样式

ea0a6442a114e3f84bd2876b2fe89718.png
 input:focus {
    font-size: 15px;
    {

设置获取到焦点时边框的样式

afe6acadef9ea3917c39cb9220443235.png
input:focus {
    border: 1px solid red;
    }

设置获取到焦点后 input 背景颜色

9422dcb1e7616177025737238f9b0d1d.png

③:给 input 焦点设置颜色,只需给 input 设置 color 属性即可(这样焦点和输入的文字都是一个颜色)

ecf6e6bc6e4f2e2e1709d3bd787a7eba.png

④:input autofocus 属性,自动获取焦点

http://www.runoob.com/tags/att-input-autofocus.html

20d8539346e4cdb244b3e0f452d2511e.png

注:PC—IE9及以下不支持;移动端—ios safari都不支持,安卓3及以上都支持


⑤:autocomplete属性让浏览器自动记录之前输入的值 

c67000312ea18e1d92191d31b2796b39.png

注:autocomplete="on" 启用自动记录;autocomplete="off" 禁用自动记录

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值