html的文本框、按钮美化

程序员文章站 2022-06-20 11:23:06

...

input框和按钮美化

- input框美化
- 按钮美化

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

input框美化

input框美化之后获得焦点之前: html的文本框、按钮美化

input框美化之后获得焦点之后: html的文本框、按钮美化
实现代码

主要通过设置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;//设置所有的轮廓属性为none
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <input type="text" class="inputText">
</body>
</html>

按钮美化

按钮效果图

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的文本框、按钮美化

input框和按钮美化

input框美化

按钮美化

HTML5里的placeholder属性使用实例和美化显示效果的方法

使用javascript和HTML5 Canvas画的四渐变色播放按钮效果

css美化input file按钮的代码方法

移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法

HTML5重写video控制栏,Chrome去除下载按钮的代码实例讲解

JQuery和html+css实现带小圆点和左右按钮的轮播图实例

用仿ActionScript的语法来编写html5——第七篇，自定义按钮

HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题

巧用HTML5给按钮背景设计不同的动画简单实例

css文本框与按钮美化效果代码