Mam zdefiniowany styl dla znacznika <input> - sa to niebieskie ramki. Oczywiscie niebieskie ramki pokazuje sie tez w checkboxach. Ja chce jednak, aby wszystkie checkboxy na stronie mialy swoj osobny styl. Da sie cos takiego zrobic i jak?
Z gory dziex.
Pełna wersja: [css] Jak zrobic styl TYLKO dla checkbox'ow?
zrob tak
Kod
<input type="checkbox" style="....tutaj_styl...." name="check1" value="1">
Masz na mysli cos takiego np.
jesli mam styl zdefiniowany w katalogu css.
Niestety nie dziala - moze jakis inny pomysl?
Kod
<input type="checkbox" style="css/css_checkbox" name="check1" value="1">
jesli mam styl zdefiniowany w katalogu css.
Niestety nie dziala - moze jakis inny pomysl?
W stylu CSS dla każdego input'a:
albo dla konkretnego input'a:
A jak chcesz dla każdego inputa różny styl przypisać to można także zrobić tak:
P.S. Kolorów nie dobierałem, tylko dałem na próbę ;p
Kod
input {
background-color: black;
color: #FFFFFF;
font-size: 8pt;
border: 1px solid blue;
}
background-color: black;
color: #FFFFFF;
font-size: 8pt;
border: 1px solid blue;
}
albo dla konkretnego input'a:
Kod
<input type="checkbox" style="background-color: black; color: #FFFFFF; font-size: 8pt; border: 1px solid blue;" name="check1" value="1">
A jak chcesz dla każdego inputa różny styl przypisać to można także zrobić tak:
Kod
input {
background-color: black;
color: #FFFFFF;
font-size: 8pt;
}
input.checkbox {
border: 1px solid blue;
}
input.text {
border: 1px solid red;
}
input.radio {
border: 1px solid yellow;
}
background-color: black;
color: #FFFFFF;
font-size: 8pt;
}
input.checkbox {
border: 1px solid blue;
}
input.text {
border: 1px solid red;
}
input.radio {
border: 1px solid yellow;
}
Kod
<input type="checkbox" class="checkbox" name="check1" value="1">
<input type="text" name="text1" value="1" class="text">
<input type="radio" class="radio" name="check1" value="1">
<input type="text" name="text1" value="1" class="text">
<input type="radio" class="radio" name="check1" value="1">
P.S. Kolorów nie dobierałem, tylko dałem na próbę ;p
Trochę brzydka taktyka - dla każdego inputa trzeba określać klasę itd... CSS umożliwia inne manewry:
W ten sposób łapiesz wszystkie checkboxy jednym selektorem.
Kod
input[type="checkbox"] {
border: 1px solid;
}
border: 1px solid;
}
W ten sposób łapiesz wszystkie checkboxy jednym selektorem.
Dziex! Poprobuje korzystajac z waszych rad 
.
.
Cytat
Trochę brzydka taktyka - dla każdego inputa trzeba określać klasę itd... CSS umożliwia inne manewry(...). W ten sposób łapiesz wszystkie checkboxy jednym selektorem.
A jest to zgodne z IE tak samo jak z Operą i innymi przeglądarkami?
Szczerze mówiąc spotykam się z takim czymś pierwszy raz
Dzięki za info
Taka forma jest przewidywana przez CSS
ale z tego co wiem, IE wciąż jej nie obsługuje :/
witam ...
wiec info z postu enceladus jest o dupe rozczasc ... wiem ze najwazniejsze jest zalecenie w3c ale ie ma 90% rynku ... wiec zostaje tylko stworzenie klas dla poszczegolnych typow czyli np.
[xml:1:3e8eb8ac93]
<input type='text' class='text'>
<input type='checkbox' class='checkbox'>
<input type='radio' class='radio'>
[/xml:1:3e8eb8ac93]
i potem w stylach
tak bedzie dzialac ze wszystkimi obecnymi browserami
cya
wiec info z postu enceladus jest o dupe rozczasc ... wiem ze najwazniejsze jest zalecenie w3c ale ie ma 90% rynku ... wiec zostaje tylko stworzenie klas dla poszczegolnych typow czyli np.
[xml:1:3e8eb8ac93]
<input type='text' class='text'>
<input type='checkbox' class='checkbox'>
<input type='radio' class='radio'>
[/xml:1:3e8eb8ac93]
i potem w stylach
Kod
input{
dane dla wszystkich inputow, np. tlo
}
input.text{
tylko dla text
}
input.checkbox{
tylko dla checkbox
}
input.radio{
tylko dla radio
}
dane dla wszystkich inputow, np. tlo
}
input.text{
tylko dla text
}
input.checkbox{
tylko dla checkbox
}
input.radio{
tylko dla radio
}
tak bedzie dzialac ze wszystkimi obecnymi browserami
cya
TO jeśli o du...e to może tak (wlasnie tego potrzebowałem) i zrobiłem w JS:
Pisałem z pamięci - powinno działać.[/xml]
Kod
function updateCheckbox() {
if (!document.getElementsByTagName) return;
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
var input = inputs[i];
if (input.getAttribute("type") == "checkbox")
input.className="klasa_dla_input_type_checkbox"
}
}
window.onload = updateCheckbox;
if (!document.getElementsByTagName) return;
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
var input = inputs[i];
if (input.getAttribute("type") == "checkbox")
input.className="klasa_dla_input_type_checkbox"
}
}
window.onload = updateCheckbox;
Pisałem z pamięci - powinno działać.[/xml]
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.