0

Возможно ли задать в style правила для фокуса, например style="&.focus: border: 1px solid red;"

Нужно именно это написать в style=""

2
  • нет. пишите css
    – Za Ars
    9 сен 2021 в 9:30
  • Вы не можете использовать псевдокласс :focusвнутри атрибута style. Если по каким-то причинам нужна инлайн-запись, то лишь вот так: <input type="text" onfocus="this.style.border='solid 1px red'" onblur="this.style.border=''"> 9 сен 2021 в 11:07

1 ответ 1

1

Я бы использовал css-свойство outline для элементов формы. А свойство border установил бы прозрачным во избежание, так сказать. Через запятую указал как focus указать для класса. По сути для этого примера это избыточно, можно было бы оставить только то, что до запятой или то, что после неё. Работать всё-равно будет корректно.

input {
  border: 1px solid transparent;
  outline: 1px solid #000;
}
input:focus, .myinput:focus {
  outline: 1px solid red;
}
<form action="">
  <input type="text" class="myinput">
</form>

А если нужны скругления border-radius, то используйте свойство box-shadow, благо, оно поддерживается большинством браузеров. ))

input {
  border: none;
  border-radius: 3px;
  outline: none;
  box-shadow: 0 0 0 1px black;
}
input:focus, .myinput:focus {
  box-shadow: 0 0 0 1px red;
}
<form action="">
  <input type="text" class="myinput">
</form>

6
  • окей а как через класс фокус показать 9 сен 2021 в 9:03
  • @svitalik1999gmailcom отредактировал ответ, чтобы указывался стиль и для класса тоже.
    – Quazimorda
    9 сен 2021 в 9:26
  • outline не дружит с border-radius 9 сен 2021 в 10:10
  • 1
    @AlexeyVladimirov и для таких взыскательных пользователей есть своё решение ))) Добавил второй вариант в ответ.
    – Quazimorda
    9 сен 2021 в 10:34
  • Не совсем понятно, что было не так со сменой цвета border и для чего в данном примере обходные варианты. Но box-shadow действительно удобен тем, что можно 1) сделать по фокусу более толстую рамку без сдвига элементов, 2) помимо рамки добить эффект подсветки, например. 9 сен 2021 в 10:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.