Блог

Главная - Вопросы по программированию - Не удается заставить значок оставаться внутри ввода

Не удается заставить значок оставаться внутри ввода

#html #css

#HTML #css

Вопрос:

Я изучаю React, но у меня простая проблема с html / css. У меня раньше были подобные вещи, но по какой-то причине я застрял.

Я пытаюсь создать простую форму входа в систему, но значок находится под входом, а не внутри. Если я попытаюсь переместить значок, играя с полями, значок скрывается за вводом.

У меня есть компонент React, который отображает:

 <Input icon="register-user" onChange={this.handleChange} type='text' placeholder='Username'   />

Ввод выглядит так:

 <div className="control has-icon input-text">
  <input {...this.props} ref='input' className={inputClassNames}/>
  <i className={icon}/>
</div>

Мой css выглядит примерно так:

 .register {
  background-size: cover;
  .container {
    width: 736px;
    height: 370px;
    clear: both;
    display: block;
    .form {
      background-color: white;
      padding: 48px 48px 20px 48px;
      height: 400px;
      width: 392px;
      border-radius: 8px;
      box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);

      .control {
        margin-bottom: 16px;
      }

      .control:last-child {
        margin-top: 21px;
      }

      .has-icon {
        background-color: pink;
      }
    } //end .form

    input {
      outline: none;
      box-shadow: none;
      text-align: left;
      height: 32px;
      width: 280px;
      border: 1px solid #006bac;
      border-radius: 4px;
      background-color: #f2f7fa;
    }
  } // end .container

  input {
    outline: none;
    box-shadow: none;
    border-radius: 0px;
    height: 40px;
    color: $admin-register-input-text;
    font-size: 16px;
    background: #2c3c44;
    border: none;
  }

  .form,
  .image {
    float: right;
    width: 50%;
    height: 100%;
  }
  .title {
    color: blue;
  }
} //end .register

.register-user {
  background: url($login_user_icon) no-repeat 50%;
  height: 16px;
  width: 13px;
  color: #006bac;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  float: right;
}

Комментарии:

1. Можете ли вы сделать фрагмент кода здесь и воспроизвести проблему?

2. В качестве примечания, при записи className={"control has-icon input-text"} вам не нужны фигурные скобки, поскольку список классов — это просто жестко закодированная строка. И там, где вы вставляете свой входной компонент, <Input ... /> похоже, что у вас есть дополнительная закрывающая скобка в конце.

3. «behide» — вы имели в виду «позади» или «кроме»?

Ответ №1:

Это скорее проблема, связанная с CSS, чем с реакцией, рассмотрите возможность игры с позицией, а не с полями, когда дело доходит до перекрывающихся элементов.

ДЕМОНСТРАЦИЯ

 .container {
  position: relative;
  /* let the input assign the width of the parent */
  display: inline-block;
}

.icon {
  position: absolute;
  top: 0;
  right: 0;
} 
 <div class="container">
  <input type="text" class="input" />
  <i class="icon">☺</i>
</div>
Метки: