html的文本框、按钮美化

2023-12-12 14:20| 来源: 网络整理| 查看: 265

input框和按钮美化 input框美化按钮美化

有时候一些后端人员，想写一个简单的表单验证的时候，前端美化问题是一个非常头疼的问题，我们直接用html的input标签和按钮会非常丑，这时候我们可以选择引入一些前端框架，例如：jQuery，layui等等，但是如果我们只是想做一个简单又好看的的表单验证，引用这些框架反而大材小用了，而且浪费内存，这时候小编就来给大家分享一个设置input属性非常实用的属性，不用引入框架也能设置出很好看的一些input框，按钮等组件，下面是效果图

input框美化

input框美化之后获得焦点之前: 在这里插入图片描述

input框美化之后获得焦点之后: 在这里插入图片描述实现代码

主要通过设置input获得焦点之后的outline属性，来实现input框美化效果，下面是实现的代码.

input框美化 .inputText{ width: 500px; height: 50px; line-height: 30px; font-size: 30px; padding-left: 30px; border-radius: 50px; background-color: gainsboro; border: none; } .inputText:focus{ outline: none;//设置所有的轮廓属性为none background-color: lightblue; } 按钮美化

按钮效果图

在这里插入图片描述

按钮框美化 .btn{ width: 150px; height: 50px; border: none; background-color: green; line-height: 50px; font-size: 30px; text-align: center; color: white; border-radius: 50px; } .btn:focus{ outline: none; } .btn-primary{ background-color: blue; } .btn-success{ background-color: green; } .btn-warning{ background-color: yellow; } .btn-danger{ background-color: red; }

【本文地址】

html的文本框、按钮美化

html的文本框、按钮美化

今日新闻

推荐新闻