Как переместить мигающий курсор в css?

Question

Как переместить мигающий курсор в css?

Я работаю над веб-сайтом (встроенным в HTML/CSS), в котором я хочу переместить мигающий курсор вправо, чтобы он не был вверху значка.

Фрагменты HTML и CSS, которые я использовал для того, чтобы сделать значок поиска:

.searchicon {

  position: absolute;

  left: 34.5%;

  top: 22.4%;

  transform: translateY(-50%);

  color: red;

  pointer-events: none;

}

<div class="input-searchicon">

  <input class="form-control search_radius mb-4" type="text">

  <span class="fa fa-search searchicon" aria-hidden="true "></span>

</div>

Постановка Задачи:

Мне интересно, какие изменения я должен внести в HTML / CSS, чтобы я мог переместить мигающий курсор немного вправо, чтобы значок был полон видимый.

В этот момент мигающий курсор находится по всему значку, как показано на скриншоте:

740 2

html css cursor

2 ответов:

Comments

Ничего не найдено.

Shameless · Accepted Answer · 2018-07-09 05:58:17

Используйте отступ на элементе ввода для регулировки положения мигающего курсора.

Я отредактировал код. Но в вашем случае все, что вам нужно сделать, это добавить
.input-searchicon input{
  padding-left: 35px;
}
Этого достаточно. Отрегулируйте положение, увеличив или уменьшив отступ.
.input-searchicon{
  position: relative;
}
.input-searchicon input{
  padding-left: 35px;
}
.searchicon {
    position: absolute;
    left: 5px;
    top: 10px;
    transform: translateY(-50%);
    color: red;
    pointer-events: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-searchicon">
        <input class="form-control search_radius mb-4" type="text">
        <span class="fa fa-search searchicon" aria-hidden="true "></span>
 </div>

Alvin Ching · Accepted Answer · 2018-07-09 06:19:54

Вместо изменения css элемента span (который является значком поиска), попробуйте изменить стиль в элементе ввода. Предполагая, что вы используете Bootstrap, вы можете добавить pl-1 для регулировки отступа влево;
 <div class="input-searchicon">
   <input class="form-control search_radius mb-4 pl-4" type="text">
   <span class="fa fa-search searchicon" aria-hidden="true "></span>
 </div>
Вы можете посетить этот Jsfiddle здесь, чтобы увидеть, что выводит образец.