Я пытаюсь разместить заполнитель на границе поля ввода - PullRequest
Новая
       80

Я пытаюсь разместить заполнитель на границе поля ввода

0 голосов
/ 05 апреля 2020

У меня есть html форма входа в систему, и я пытаюсь добиться того же стиля, который Google имеет сейчас в своих формах входа (2019-2020). Первая фотография - когда не нажата, вторая фотография - когда нажата.

input when NOT clicked input when clicked

Я пробовал следующий подход , но мне не нравится результат. 

<form>
  <fieldset style="padding:1px;">
    <legend style="padding:0px;">E-mailaddress or phonenumber</legend>
    <input style="width:90%;" type="text">
  </fieldset>
</form>

На официальной странице входа в Google заполнитель "скользит" к границе при нажатии. Если я не могу добиться этого без использования Javascript, то это не вариант для меня, так как я делаю страницу портала CPD. Это не позволяет JavaScript.

Текст не должен быть виден на границе, когда поле ввода не щелкается, и он должен быть видимым, когда поле ввода нажимается и когда пользователь печатает.

Я также пробовал это: 

body {
    background-color: #ccc;
}

input {
    border: 1px solid #000
    width: 200px;
    padding: 20px;
        font-size: 20px;
}


#myInput::-webkit-input-placeholder {

 border-style:solid;
border-width:medium;
}
#myInput:-moz-placeholder {
 border-style:solid;
border-width:medium;
}
#myInput:-ms-input-placeholder {
 border-style:solid;
border-width:medium;
}
<input id="myInput" type="text" placeholder="Add border to this text" />

Это не совсем то, чего я хотел бы достичь, и когда я пытаюсь сделать это отзывчивым с различными размерами экрана, текст in граница попадает не в те места, и ее трудно правильно разместить. Если бы кто-то мог помочь добиться того, что я показываю на изображениях, это было бы удивительно. Заранее спасибо.

1 Ответ

0 голосов
/ 05 апреля 2020

Чтобы нацелить вводящий заполнитель на фокус, вы можете использовать следующий селектор: 

input:focus::-webkit-input-placeholder

Однако вы не можете заставить сам заполнитель "прыгать" или менять положение, как не все CSS свойства поддерживаются на заполнителях. Возможный обходной путь - использовать метку, как описано, например, в этот ответ .

Ответ, связанный не меняет стилизацию между фокусом / расфокусировкой, поэтому я основал на нем фрагмент кода ниже и построено сверху: 

.group {
  margin: 200px;
  position:relative;
}

#myInput:focus::-webkit-input-placeholder {
  visibility:hidden; /*hide placeholder on focus*/
}

#myInput {
  padding: 5px;
}

#myInput:focus {
  border: 1px solid dodgerblue;
  border-radius:3px;
}

#myInput-label {
  display: none;
  font-size:11px;
  color:dodgerblue;
  font-family:sans-serif;
  background-color: #fff;
  padding: 0 3px;
}



/*style of label when input is focused*/
#myInput:focus + #myInput-label  {
  display: inline-block;
  position:absolute;
  left: 12px;
  top:-5px;
}
<div class="group">
  <input id="myInput" type="text" placeholder="Add border to this text" />
  <label id="myInput-label">Add border to this text</label>
</div>
...