更加美化输入框的方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了更加美化输入框的方法相关的知识,希望对你有一定的参考价值。

在使用input输入框的时候经常会遇到想要让输入框里显示的内容变得更加漂亮多样

今天我和大家分享的就是如何使输入框设计得更适合自己的想法。

首先,我们创建一个输入框input

然后我们就可以使用

padding-left:n px;(n是作者自己设定)

这段代码的作用是使输入框的内容缩进,不过它也会使边框的宽度增加,

所以增加了多少缩进,就得减少多少边框的宽度。

border:1px solid red;(粗细,样式,颜色)

这段代码的作用是设定输入框的边框的粗细样式和颜色,也会增加边框的宽高。

outline:none;

这段代码可以使用户点击输入框的时候,输入框不会被焦点获取,也就是不会在获取焦点后被系统改变边框颜色。

以上是关于更加美化输入框的方法的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序6位支付密码输入框

微信小程序输入框禁止自动弹出

微信小程序弹窗下输入框点击还会获取焦点

Js如何实现 输入框的3秒内没输入就执行一个方法

一个日期时间显示框的美化风格示例

移动端页面输入法挡住input输入框的解决方法