Forum PHP.pl > [Formularz] Po wciśnięciu "radio" ma się podświetlić

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [Formularz] Po wciśnięciu "radio" ma się podświetlić

maxcv5123

11.05.2017, 17:52:49

Mam formularz i chcę aby po wciśnięciu "radio" pole to było obramowane. Przykład jak to ma wyglądać http://jsfiddle.net/QqVCu/12/
Niestety nie jestem wstanie zastosować tego rozwiązania w moim kodzie. Próbuje już godzinę i bez efektu.
Kod wygląda tak:

[HTML] pobierz, plaintext 
<div id="XTfield_Status" class="XTSPClassRadio SPSearchRadio">
<div class="XTSPFieldRadio" style="width:150px;">
<label class="radio-inline" for="XTfield_Status_yes">
<input id="XTfield_Status_yes" class="XTSPClassRadio SPSearchRadio" name="field_Status" value="1" type="radio">
Typ1
</label>
</div>
<div class="XTSPFieldRadio" style="width:150px;">
<label class="radio-inline" for="XTfield_Status_2">
<input id="XTfield_Status_2" class="XTSPClassRadio SPSearchRadio" name="field_Status" value="2" type="radio">
Typ2
</label>
</div>
</div>
[HTML] pobierz, plaintext

gogomania

12.05.2017, 10:51:24

Cytat(maxcv5123 @ 11.05.2017, 18:52:49 )

[HTML] pobierz, plaintext 
<div id="XTfield_Status" class="XTSPClassRadio SPSearchRadio">
<div class="XTSPFieldRadio" style="width:150px;">
<label class="radio-inline" for="XTfield_Status_yes">
<input id="XTfield_Status_yes" class="XTSPClassRadio SPSearchRadio" name="field_Status" value="1" type="radio">
Typ1
</label>
</div>
<div class="XTSPFieldRadio" style="width:150px;">
<label class="radio-inline" for="XTfield_Status_2">
<input id="XTfield_Status_2" class="XTSPClassRadio SPSearchRadio" name="field_Status" value="2" type="radio">
Typ2
</label>
</div>
</div>
[HTML] pobierz, plaintext

Pobaw sie css, nie czekaj aż ktoś zrobi coś za Ciebie.
Niżej podpowiedź jak to może wyglądać, zobacz różnice tym co podałeś w linku, a w tym co niżej:

[HTML] pobierz, plaintext 
<style>
.XTSPFieldRadio {
	display:inline; /* lub block */
	width:100px;
	height:30px;
	cursor:pointer;
	position: relative;
}
 
label {
    width: 100%;
    height: 100%;
    display: block;
}
 
input[type="radio"] {
    position: absolute;
    top: 0px;
    left: 10%;
}
 
input[type="radio"]:checked + label {
    border: green 1px solid;
}
.radio-inline {
    padding-top: 4px;
    padding-bottom: 4px;
 }
</style>
 
	<div id="XTfield_Status" class="XTSPClassRadio SPSearchRadio">
		<div class="XTSPFieldRadio">
			<input id="XTfield_Status_yes" class="XTSPClassRadio SPSearchRadio" name="field_Status" value="1" type="radio">
			<label for="XTfield_Status_yes" class="radio-inline">Typ1</label>
		</div>
		<div class="XTSPFieldRadio">
			<input id="XTfield_Status_2" class="XTSPClassRadio SPSearchRadio" name="field_Status" value="2" type="radio">
			<label for="XTfield_Status_2" class="radio-inline">Typ2</label>
		</div>
	</div>
[HTML] pobierz, plaintext

PS. skoro masz gotowy kod w linku, który podałeś - nie jesteś w stanie go przerobić? Mi zajęło to 5 min, a do bycia orłem w kodowaniu mi daleko. Nie bądź leniwy!

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.