用户表单form:radio,checkbox,滚动条,select[multiple]选中自定义样式及按钮type

最新推荐文章于 2024-10-15 12:24:04 发布

weixin_47529732

最新推荐文章于 2024-10-15 12:24:04 发布

阅读量303

点赞数 9

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_47529732/article/details/139837223

版权

1.效果图

2. radio 单选选中自定义样式

3. checkbox 多选选中自定义样式

4. 滚动条自定义样式

5. select[multiple] 多选选择器选中背景色

6. 其余代码(贴上上面几点的css,加上下面的代码即可实现效果图)

6.1 html

6.2 css

1.效果图

2. radio 单选选中自定义样式

/* radio 选择自定义样式 */
input[type="radio"]+label::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: .853333rem;
    height: .853333rem;
    border-radius: 50%;
    border: .064rem solid #fd8869;
    margin-right: .213333rem;
    box-sizing: border-box;
}

input[type="radio"]:checked+label::before {
    background-color: #fd8869;
    background-clip: content-box;
    padding: .149333rem;
    box-sizing: border-box;
}

input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

3. checkbox 多选选中自定义样式

/* checkbox 选中自定义样式 */
input[type=checkbox] {
    cursor: pointer;
    position: relative;
    width: 18px;
    height: 18px;
    font-size: 12px;
}

input[type=checkbox]::after {
    position: absolute;
    top: 0;
    color: #000;
    width: 18px;
    height: 18px;
    display: inline-block;
    visibility: visible;
    padding-left: 0px;
    text-align: center;
    content: ' ';
    border-radius: 3px
}

input[type=checkbox]:checked::after {
    content: "✓";
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    background-color: #ff4014;
}

4. 滚动条自定义样式

/* 设置滚动条 */
/* 设置滚动条的宽度和颜色 */
::-webkit-scrollbar {
    width: 5px;
    /* 设置滚动条的宽度 */
    background-color: #f9f9f9;
    /* 设置滚动条的背景颜色 */
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    /* 设置滑块的圆角 */
    background-color: #9E9E9E;
    /* 设置滑块的颜色 */
}

/* 设置滚动条滑块hover效果的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #828282;
    /* 设置滑块hover时的颜色 */
}

5. select[multiple] 多选选择器选中背景色

/* select[multiple] 多项选择选中背景色 */
select[multiple] option:checked {
    background: red linear-gradient(0deg, red 0%, red 100%);
}

6. 其余代码(贴上上面几点的css,加上下面的代码即可实现效果图)

6.1 html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <form class="container" action="">
        <h1>用户注册</h1>

        <div class="form-item">
            <input class="txt" type="text" name="" id="" placeholder="请输入11位手机号">
        </div>

        <div class="form-item">
            <input class="txt left yz-text" type="text" name="" id="" placeholder="请填写验证码">
            <!-- type为button，不然会自动清空内容 -->
            <button class="right" type="button" disabled>发送验证码</button>
        </div>

        <div class="form-item">
            <input class="txt" type="text" name="" id="" placeholder="请输入密码">
        </div>

        <div class="form-item">
            <input class="txt" type="text" name="" id="" placeholder="请再次确认密码">
        </div>

        <div class="form-item">
            <select class="txt" multiple name="" id="">
                <option selected>爱好1</option>
                <option>爱好2</option>
                <option>爱好3</option>
                <option>爱好4</option>
                <option selected>爱好5</option>
                <option>爱好6</option>
                <option>爱好7</option>
                <option>爱好8</option>
                <option>爱好9</option>
                <option>爱好10</option>
            </select>
        </div>

        <div class="form-item">
            <div class="left radio-text">性别</div>
            <div class="left">
                <!-- <label>
                    <input type="radio" name="sex" id="male">
                    <span>男</span>
                </label> -->
                <!-- label的for属性对应单选框的id属性 -->
                <input type="radio" name="sex" id="male" checked>
                <label for="male">男</label>

                <input type="radio" name="sex" id="female">
                <label for="female">女</label>
            </div>
        </div>

        <div class="form-item">
            <textarea class="txt" placeholder="请输入个人简介"></textarea>
        </div>

        <div class="form-item">
            <label>
                <input type="checkbox">
                <span class="xieyi">同意协议</span>
            </label>
        </div>

        <div class="form-item">
            <button disabled>立即注册</button>
            <button class="right" type="reset">重置表单</button>
        </div>
    </form>
</body>

</html>

6.2 css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: rgb(6, 21, 30);
}

.container {
    width: 400px;
    margin: 30px auto 0;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
}

.container h1 {
    text-align: center;
    margin-bottom: 20px;
}

/* 统一设置文本框 */
.txt {
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    padding: 0 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    /* outline 不算在盒模型里 */
    outline: none;
}

.txt:focus {
    border: 1px solid rgb(201, 236, 255);
}

select.txt {
    height: 100px;
    padding: 10px;
}


textarea.txt {
    height: 80px;
    padding: 10px;
    /* resize禁止改变宽高 */
    resize: none;
}

button {
    width: 150px;
    height: 40px;
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
    outline: none;
    border: none;
    background: rgb(79, 108, 194);
    cursor: pointer;
}

button:hover {
    background: #759ae9;
}

/* 禁用 */
button:disabled {
    background: #afc4f0;
    cursor: not-allowed;
}

.left {
    float: left;
}

.right {
    float: right;
}

.radio-text {
    margin-right: 15px;
    margin-bottom: 20px;
}

.yz-text {
    width: 170px;
}

/* 元素在同一行，可选择一个子元素设置 vertical-align 使其垂直方向对齐 */
.xieyi {
    vertical-align: 3px;
}

/* 单选、多选  选中状态 */
label {
    cursor: pointer;
}

label span {
    color: #aaa;
}

/* ~ input:checked后面的所有元素  */
/* ~ span 只要后面的span */
label input:checked~span {
    color: #000;
}

/* 额外知识 */
/* 改变提示词的字体颜色 */
.txt::placeholder {
    color: #ccc;
}

/* 改变 聚焦时 提示词的字体颜色 */
.txt:focus::placeholder {
    color: red;
}

weixin_47529732

关注

9
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫