1.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
/* 去除默认样式 */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;}
)
