css去掉input,textarea默认样式，自定义样式

00代码搬运工2023-12-11 18:47

1.HTML

html 复制代码

<section>
            <div class="text">姓名</div>
            <input type="text" placeholder="请输入姓名" class="input">
        </section>
<section>
            <div class="text">详情</div>
            <textarea class="textarea" placeholder="请输入详情"></textarea>
</section>

2.css

css 复制代码

/* 去除默认样式 */
        input {
            border: none;
            outline: none;
            padding: 0;
            margin: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: none;
            background-color: transparent;
            font-size: inherit;
        }

        input:focus {
            outline: none;
        }

        .input {
            width: 100%;
            height: 40px;
            color: #606266;
            background-color: #fff;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            padding-left: 15px;
            margin-top: 10px;
            line-height: 40px;

        }

        /* 修改文字颜色 聚焦 */
        .input::placeholder {
            color: #c0c4cc;
        }

        .input:hover {
            border-color: #c0c4cc;
        }

        .input:focus {
            border-color: #3677f0;

        }

css 复制代码

textarea {
            border: none;
            outline: none;
            padding: 0;
            margin: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: none;
            background-color: transparent;
            /* font-size: inherit; */
            width: 100%;
        }

        input:focus {
            outline: none;
        }

        .textarea {
            width: 100%;
            height: 80px;
            color: #606266;
            background-color: #fff;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            padding: 5px 0 5px 15px;
            margin-top: 10px;
        }

        /* 修改文字颜色 聚焦 */
        .textarea::placeholder {
            color: #c0c4cc;

            font-size: 16px;
            font-weight: 600;
        }

        .textarea:hover {
            border-color: #c0c4cc;
        }

        .textarea:focus {
            border-color: #3677f0;

        }