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

1.HTML

姓名
详情

2.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;

        }
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;

        }

你可能感兴趣的:(css,前端)