其他分享
首页 > 其他分享> > html css——美化表单元素

html css——美化表单元素

作者：互联网

美化表单元素

文章目录

新的伪类

  1. focus 元素聚焦样式
<!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>Document</title>
    <style>
        input:focus{
            outline: 3px solid #008c8c;
            outline-offset: none;
            color: red;

        }
        input{
            color: blue;
        }
    </style>
</head>
<body>
    <p>
        <a tabindex="2" href="http://www.baidu.com">lorem</a>
    </p>

    <p>
        <input type="text" tabindex="1">
    </p>

    <p>
        <button tabindex="3">提交</button>
    </p>
</body>
</html>
  1. checked

单选或多选选中的样式

<!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>Document</title>
    <style>
        input:checked+label{
            /* 选中的单选框的下一个兄弟元素 label元素 */
            color: red;

        }
    </style>
</head>
<body>
    <p>
        <input id="radmale" name="gender" type="radio">
        <label for="radmale">男</label>

        <input id="radfemale" name="gender" type="radio">
        <label for="radfemale">女</label>
    </p>
</body>
</html>

常见用法

  1. 重置表单元素样式
input,textarea,button,select{
    border: none;

}

input:focus,
textarea:focus,
button:focus,
select:focus{
    outline: none;
    outline-offset: 0;
}

  1. 设置textarea是否允许调整尺寸
    resize :both(两边都可调) none …
    horizontal 水平方向
    vertical 垂直方向

  2. 文本框边缘到文字距离

<!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>Document</title>
    <style>
        /* 方式一 padding */
        input{
            padding-left: 10px;
        }
        /* 方式二 text-indent 不能设置两边 */
        textarea{
            text-indent: 1em;
        }
    </style>
</head>
<body>
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
  1. 控制单选，多选的样式

制作好看的单选框(important)

<!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>Document</title>
    <style>
        .radio-item .radio{
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 2px solid #999;
            border-radius: 50%;
            cursor: pointer;
        }
        .radio-item input:checked+.radio{
            border-color: #008c8c;
        }

        .radio-item input:checked~span{
            color: #008c8c;
        }

        .radio-item input:checked+.radio::after{
            content: "";
            display: block;
            width: 5px;
            height: 5px;
            background-color: #008c8c;
            margin-top: 3.5px;
            margin-left: 3.5px;
            border-radius: 50%;
        }

        .radio-item input[type="radio"]{
            display: none;
            /* 隐藏最初单选框 */
        }

    </style>
</head>
<body>
    <p>
        选择:
        <label class="radio-item">
            <input type="radio" name="gender">
            <span class="radio"></span>
            <span>男</span>
        </label>

        <label class="radio-item">
            <input type="radio" name="gender">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </p>
</body>
</html>

标签：checked,color,focus,表单,item,html,radio,input,css
来源： https://blog.csdn.net/coising/article/details/122640912