Уберите на одном конкретном входе его контур и оставьте только границу

Question

Я пытался использовать "контур: 0", но это ничего не меняет.

#input_field {
  outline: 0;
  width: fit-content;
  margin: auto;
  margin-top: 20%;
  border-radius: 30px;
  border: 2px solid turquoise;
  padding: 6px;
}

<div id="input_field">
  <input type="text" name="q" size="50">
</div>

Мне все еще нужно наброски для других входов.

ОБНОВЛЕНО :

.lucky_pos, .button_search_pos{    
    text-align: center;
    padding:1px;
    margin: 0;
    flex-direction: row;
}

Так как я не хочу, чтобы другие обновлялись, вот .css относительно других. Схема должна только применяться к полю #input_. Заранее спасибо!

html css outline

0

Tom Retterath 19 Июл 2020 в 16:40

Answer 1

Вы можете сделать что-то вроде этого:

играть на скрипке.

#input_field {
  width: fit-content;
  margin: auto;
  margin-top: 20%;
  border-radius: 30px;
  border: 2px solid turquoise;
  padding: 6px;
}

.OutlineNotNeeded {
  border: none;
}

.OutlineNotNeeded:focus {
  outline: 0;
}

<div id="input_field">
  <input type="text" class="OutlineNotNeeded" name="q" size="50">
</div>

2

dgknca 19 Июл 2020 в 14:10

Answer 2

Вам нужно удалить контур на input в фокусе.

#input_field > input:focus {
   outline:none;
}

Чтобы удалить границу (которая может вас обмануть, потому что она выглядит так же, как контур и всегда будет оставаться там даже в фокусе, если вы ее не удалите), вы можете добавить:

#input_field > input {
   border:none;
}

Если вы пытаетесь увидеть границу только во время фокусировки, вы можете перейти:

#input_field > input {
   border:none;
}

#input_field > input:focus {
   border:1px solid #000;
}

0

Ahron M. Galitzky 19 Июл 2020 в 14:17

Answer 3

Вам просто нужно поместить другой класс или идентификатор для входного тега, чтобы контур был в фокусе / не в фокусе. Состояние фокуса - это действие, выполняемое при нажатии кнопки ввода.

input.showoutline:focus{
 outline: color type size;
} 

input.hideoutline:focus{
 outline: 0;
} 

<input class="showoutline"/> 
<input class="hideoutline"/>

0

rownin 19 Июл 2020 в 14:19

Уберите на одном конкретном входе его контур и оставьте только границу

3 ответа

Новые вопросы

html