input实践

by Robbie Yang

HTML

<div class="input_wrap">
    <div class="input_icon"></div>
    <input class="input_text" type="text" placeholder="请输入内容">
    <div class="input_close"></div>
  </div>

SCSS

.input {
  &_wrap {
    position: relative;
    width: 530px;
  }
  &_icon {
    position: absolute;
    top: calc(50% - 15px);
    left: 20px;
    width: 30px;
    height: 30px;
    background: red;
    background-size: contain;
  }
  &_text {
    width: calc(100%);
    height: 68px;
    padding: 0;
    font-size: 22px;
    line-height: 68px;
    caret-color: #5c30ec;
    text-indent: 60px;
    border: none;
    border-radius: 20px;
    background-color: #efeef4;
  }
  &_text::placeholder {
    color: rgb(88, 87, 87);
  }
  &_text:focus {
    outline: none !important;
    box-shadow: none;
  }
  &_close {
    position: absolute;
    top: calc(50% - 20px);
    right: 20px;
    width: 40px;
    height: 40px;
    background: blue;
    background-size: contain;
  }
}