Поместить курсор тега ввода HTML в левую часть текста-заполнителя

#html #css

#HTML #css

Вопрос:

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

Вот мое поле:

 <input type="email" name="email" placeholder="enter your email...">

Вот весь мой CSS:

 background-color:rgb(255, 255, 255);
border-bottom-color:rgb(255, 255, 255);
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-style:solid;
border-bottom-width:1px;
border-image-outset:0px;
border-image-repeat:stretch;
border-image-slice:100%;
border-image-source:none;
border-image-width:1;
border-left-color:rgb(255, 255, 255);
border-left-style:solid;
border-left-width:1px;
border-right-color:rgb(255, 255, 255);
border-right-style:solid;
border-right-width:1px;
border-top-color:rgb(255, 255, 255);
border-top-left-radius:0px;
border-top-right-radius:0px;
border-top-style:solid;
border-top-width:1px;
box-sizing:border-box;
color:rgb(0, 0, 0);
cursor:text;
display:inline-block;
font-family:azo-sans-web, sans-serif;
font-size:16px;
font-stretch:100%;
font-style:normal;
font-variant-caps:normal;
font-variant-east-asian:normal;
font-variant-ligatures:normal;
font-variant-numeric:normal;
font-weight:400;
height:72px;
letter-spacing:0.56px;
line-height:22.8571px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
outline-color:rgb(0, 0, 0);
outline-style:none;
outline-width:0px;
padding-bottom:24px;
padding-left:24px;
padding-right:24px;
padding-top:24px;
text-align:center;
text-indent:0px;
text-rendering:auto;
text-shadow:none;
text-transform:none;
width:702px;
word-spacing:0px;
writing-mode:horizontal-tb;
-webkit-appearance:none;
-webkit-box-direction:normal;
-webkit-rtl-ordering:logical;
-webkit-border-image:none;

1. Это именно то, что он делает для меня в Firefox и Chrome. О чем именно вы здесь спрашиваете?

2. @JCollier вы тоже используете Firefox, и есть ли у вас css в поле ввода?

3. @JCollier посмотри на эту скрипку jsfiddle.net/qz1e2yhf (Необходим ли тег javascript ??)

4. @Pointy Я думаю, то, что я спрашиваю, понятно. Я хочу, чтобы курсор находился слева от текста, а не в центре.

5. @Rachel_Gallen Я использую Chrome. И я отредактирую сообщение, чтобы вставить CSS.

Ответ №1:

Скорее всего, происходит выравнивание текста по центру, применяемое к вводимым данным. Убедитесь, что выравнивание текста установлено по левому краю или вообще не установлено по умолчанию по левому краю.

Обновлен код для каждого комментария:

Я хочу, чтобы мой ввод был таким же, как первый в вашем фрагменте кода, с той лишь разницей, что курсор находится слева от текста по центру

Единственный способ сделать это с помощью чистого CSS — имитировать заполнитель другим элементом. Однако это имеет побочный эффект скрытия заполнителя, когда ввод получает фокус.

 .parent {
  position: relative;
  max-width: 200px;
}
#first-input {
  text-align: left;
  position: relative;
  z-index: 1;
  background-color: transparent;
  width: 100%;
}
#first-input:focus   .placeholder {
  display: none;
}
.placeholder {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  font-size: 13px;
  width: 100%;
  height: 100%;
  text-align: center;
}

 <div class="parent">
  <input id="first-input" type="text"/>
  <div class="placeholder">Type something..</div>
</div>

1. Я хочу, чтобы мой ввод был таким же, как первый в вашем фрагменте кода, с той лишь разницей, что курсор находится слева от текста по центру. Я не хочу, чтобы текст-заполнитель также был выровнен по левому краю, как во втором.