Постоянный focus на button (запрет . blur)

30 ноября 2021, 02:20

Есть форма регистрации в которой две кнопки ("Вариант 1" и "Вариант 2").

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

Answer 1

Если правильно понял, то речь идет о простой стилизации выбранного варианта. В самом примитивном случае это таки должны быть радиобатоны.

Focus и Blur здесь не при чем. Focus = перетабить на элемент или тыцнуть в него мышей с характерным нажатием левой кнопы. Blur = потерять фокус там, где он только что был. Очень по-простому

label.radio{width:100px;float:left;margin:5px} 
label.radio div{width:100px;height:34px;border:1px solid #000;position:absolute;top:0} 
label.radio input:checked + div{background-color:#000;color:#fff} 
label.radio input{opacity:0}

<form> 
  <label class="radio"> 
    <input type="radio" name="option" value="1" checked="checked" /> 
    <div>option 1</div> 
  </label> 
   <label class="radio"> 
     <input type="radio" name="option" value="2" /> 
     <div>option 2</div> 
  </label><br/><br/> 
  <input type="text" name="text" placeholder="another field" /><br/> 
  <input type="text" name="text" placeholder="another field" /><br/> 
  <input type="text" name="text" placeholder="another field" /> 
</form>