CSS - radio required - komunikat o braku wyboru wyświetlany jest w złym miejscu

pytanie zadane 14 lipca 2017 w HTML i CSS przez eround155 Nowicjusz (150 p.)

Komunikat o braku wyboru input radio wyświetlany jest w złym miejscu, tak jak na screenie:

(w lewym górnym rogu przeglądarki - FF)

zależy mi na tym aby uniknąć JS. Poniżej kod html, ale nie ma w nim nic nadzwyczajnego, jakieś pomysły skąd bierze się ten błąd?

<form ...>
<div class="row">
<div class="col-md-3">
<div class="select-radio">
<div class="radios">

<input id="id1" type="radio" name="radiogroup1" value="id1" required />

<label class="......" for="id1">
text
</label>
</div>

<div class="radios">

<input id="id2" type="radio" name="radiogroup1" value="id2" />

<label class="......" for="id2">
text2
</label>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-3">
<input ....
<input type="submit">
</div>
</div>
</form>

1 odpowiedź

odpowiedź 14 lipca 2017 przez Comandeer Guru (601,510 p.)
wybrane 14 lipca 2017 przez eround155

Najlepsza

Walidacja natywna formularzy wgl jest strasznie zabugowana, dlatego wszyscy i tak polecają brać do tego JS, a walidację natywną zostawić jako fallback.

komentarz 14 lipca 2017 przez eround155 Nowicjusz (150 p.)

dzięki za szybką odpowiedz!

masz może jakiś sprawdzony kod js dla radio i jednego input text, który będzie działał poprawnie na wszystkich przeglądarkach, urządzeniach oraz systemach windows, android, ios?

1	komentarz 14 lipca 2017 przez niezalogowany Nawet co nie zbugowana, to po prostu w każdej przeglądarce działa trochę inaczej.

1	komentarz 14 lipca 2017 przez Comandeer Guru (601,510 p.) masz może jakiś sprawdzony kod js dla radio i jednego input text, który będzie działał poprawnie na wszystkich przeglądarkach, urządzeniach oraz systemach windows, android, ios? Takiego to nikt nie ma ;)