html的文本框、按钮美化

input框和按钮美化

input框美化
按钮美化

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

input框美化

input框美化之后获得焦点之前:

input框美化之后获得焦点之后:
实现代码

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input框美化</title><style>.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;//设置所有的轮廓属性为nonebackground-color: lightblue;}</style>
</head>
<body><input type="text" class="inputText">
</body>
</html>

按钮美化

按钮效果图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮框美化</title><style>.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;}</style>
</head>
<body><input type="button" value="按钮" class="btn btn-primary"><input type="button" value="按钮" class="btn btn-success"><input type="button" value="按钮" class="btn btn-warning"><input type="button" value="按钮" class="btn btn-danger">
</body>
</html>

html的文本框、按钮美化相关推荐

怎样美化html文本框,HTML/css文本框样式美化代码
HTML/CSS文本框样式美化代码输入框景背景透明: 鼠标划过输入框,输入框背景色变色: style="width: 106; height: 21" οnmοuseοut=&q ...
HTML+CSS 主页面美化的详细过程及全部代码（美化导航栏+文本框+按钮）
文章目录效果图展示前言步骤 0.创建css文件 1.美化中间板块 1.1 html改变 1.2. css部分 1.3. placeholder美化 2.增加导航栏 2.1 html文件增加代码 ...
html css文本框按钮,css样式之区分input是按钮还是文本框的方法
当你看到这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表 ...
Jquery+CSS Input file 文本框轻美化
HTML原生的input file 上传按钮有多(无)不(力)漂(吐)亮(槽)我就不多说了.大家几乎在项目中都会有遇到图片.等文件需要上传的地方,好看的文件上传按钮会使人身心愉悦(我瞎说的).好了不多 ...
文本框自动提示_Excel办公小技巧，使用艺术字与文本框，就是那么的简单
Excel中的艺术字同时拥有文字和图形两种对象的属性,不仅可以修改其中的内容,还可以调整形状的大小.设置边框以及内部填充等效果,常在编辑表格标题或者输入一些比较有提示性的文本时使用,在突出关键内容的同 ...
vscode 不展示文档注释内容_文本框这样用，实现文档不同板块内容高效联动，你还不知道吧...
--word2016系列教程之"文本框链接使用" 我们使用word文档进行手抄报排版或其他文档排版时,可能会出现一个板块的内容比较多,排不下去.需要在其它板块进行排列,像这样--, ...
pdf中如何编辑文本框
在word中插入文本框对于经常接触文档的人来说可谓是信手拈来,但是在pdf文档中要进行这个操作该怎么办呢?方法也很简单! 第一步,先到网上下载一个捷速pdf编辑器: 下载好之后将编辑器打开,并单击左上 ...
使用JavaScript在文本框中的Enter键上触发按钮单击
我有一个文本输入和一个按钮(见下文). 当在文本框中按下Enter键时,如何使用JavaScript 触发按钮的click事件 ? 当前页面上已经有一个不同的"提交"按钮,因此我不 ...
css搜索的文本框,一个很不错的CSS改写的大表单文本框和搜索按钮组
<一个很不错的CSS改写的大表单文本框和搜索按钮组>要点: 本文介绍了一个很不错的CSS改写的大表单文本框和搜索按钮组,希望对您有用.如果有疑问,可以联系我们. 先看效果图: 开始爬取 C ...

html的文本框、按钮美化

input框和按钮美化

input框美化

按钮美化

html的文本框、按钮美化相关推荐

最新文章

热门文章