Jak mogę zwiększyć rozmiar pola wyboru?

Question

Moja strona używa checkboxów. Wydają się bardzo małe. Starałem się je powiększyć za pomocą "font-size: 1.5em". To chyba nie zmieniło ich wcale.

Czy istnieje prosty sposób na zwiększenie pola wyboru?

Dzięki,

Answer 1

nie można zmienić wygląd pól wyboru w większości przeglądarek. Zaznacz to: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

Spróbuj dodać element i zmienić status tego pola wyboru. Sprawdź to na przykładzie: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Answer 2

Możesz to zrobić za pomocą obrazów.

CSS

#mycheckbox 
{ 
    display: none; 
} 

#mycheckbox + label 
{ 
    float: left; 
    width: 200px; 
    height: 200px; 
    background: url('/path/to/photo_of_big_unchecked_box.png'); 
} 

#mycheckbox:checked + label 
{ 
    background: url('/path/to/photo_of_big_checked_box.png'); 
} 

HTML

<input type="checkbox" name="mycheckbox" id="mycheckbox"><label for="mycheckbox"></label> 

To jeden sposób można osiągnąć ten cel.

EDIT

Here odnośnikiem pracy dla IE

Answer 3

Niestety, CSS jest trochę niezdefiniowane z <input> dokonywania możliwości modyfikowania ich ograniczona. Różne przeglądarki robią różne rzeczy. width i height praktycznie działają na pola wyboru tylko w Internet Explorerze.

Pojawiły się różne rozwiązania, na przykład emulating checkboxes using JS, so those can be styled.

Answer 4

Ponieważ nie można zmienić wyglądu pól wyboru zgodnych z przeglądarką internetową, sugeruję użycie czegoś takiego jak Ryan Fait describes in his blog. Ta technika pozwala używać niestandardowych grafik dla pól wyboru.

---

Answer 5

Być może wydaje się trochę zbyt oczywiste, ale to działa:

input[type='checkbox'] { 
    width: 30px; 
    height: 30px;   
} 

To działa jak można się spodziewać na IE i Chrome, a mimo to nie wygląda to większe na Firefox nadal się większe pole obrażeń:

Answer 6

można użyć tagu CSS zoom.

h6 { 
 
    zoom: 5; 
 
}

<h6><input type="checkbox"></h6>