Trudno to zrobić w różnych przeglądarkach. Roger Johansson zbadał to dość szeroko.
Cristian Libardo,
Czytanie wszystkich komentarzy - jest to naprawdę prosty sposób, aby to zrobić bez udziału CSS: <input type = "checkbox" name = "checkboxName" value = "on" style = "szerokość: 110%; wysokość: 110%">
Jest trochę brzydki (ze względu na zwiększenie skali), ale działa w większości nowszych przeglądarek:
input[type=checkbox]{/* Double-sized Checkboxes */-ms-transform: scale(2);/* IE */-moz-transform: scale(2);/* FF */-webkit-transform: scale(2);/* Safari and Chrome */-o-transform: scale(2);/* Opera */transform: scale(2);padding:10px;}/* Might want to wrap a span around your checkbox text */.checkboxtext
{/* Checkbox text */font-size:110%;display: inline;}
<inputtype="checkbox"name="optiona"id="opta"checked/><spanclass="checkboxtext">
Option A
</span><inputtype="checkbox"name="optionb"id="optb"/><spanclass="checkboxtext">
Option B
</span><inputtype="checkbox"name="optionc"id="optc"/><spanclass="checkboxtext">
Option C
</span>
wydaje się, że jest to poprawna odpowiedź, ponieważ ta oznaczona jako odpowiedź w wielu przypadkach nie oferuje żadnych rozwiązań (brak rozwiązania dla firefox na XP? w ogóle nie ma chromu?), jest nieaktualna i zawiera jedynie link i komentarz o niewielkiej wartości.
nurettin
4
@jdw +1 dla tej odpowiedzi i nawet ja musiałem to zrobić, a twoja odpowiedź była pomocna. Ale jakoś stwierdziłem, że pole wyboru „skalowane” wydaje się być trochę zniekształcone. Nie wiem, czy jest tak w przypadku FF czy mojego systemu operacyjnego (Ubuntu 12.04). W każdym razie dzięki :)
itsols
1
Skala () potrzebuje 2 parametrów dla chrome, FF i IE. Myślę, że. Jeśli więc po prostu zmienisz wszystkie skale na skalę (2,2), powinna działać każda przeglądarka.
Onur Topal
10
dodaj transform: scale(2);też, aby zapewnić więcej dla każdej przeglądarki
Adriano Resende
8
skalowanie wygląda okropnie, na skali 2 widać już poszczególne piksele. Nigdy nie wybrałbym tego rozwiązania dla pięknych dużych pól wyboru css.
basZero
369
Działające rozwiązanie dla wszystkich nowoczesnych przeglądarek.
@ Huangizm Nie, powyższy kod nie będzie miał żadnego wpływu w IE 8, który nie obsługuje tej transformwłaściwości. Obsługuje IE 9, -ms-transformktórego można użyć, jednak niektórzy twierdzą, że jest dość podzielony na piksele, więc lepiej pozostawić IE 9 z domyślną.
Simon East
Nie jest to złe podejście, ponieważ istnieje ograniczenie skali, ponieważ powoduje pikselowanie pola wyboru.
To interesujące, że Mozilla go zniechęca, podczas gdy Firefox jest prawie jedyną przeglądarką, która go nie obsługuje: caniuse.com/#feat=css-zoom
ndreisg
47
Wersja 2020 - przy użyciu pseudoelementów rozmiar zależy od rozmiaru czcionki.
Domyślne pole wyboru / radio jest renderowane poza ekranem, ale CSS tworzy elementy wirtualne bardzo podobne do elementów domyślnych. Obsługuje wszystkie przeglądarki, bez rozmycia. Rozmiar zależy od rozmiaru czcionki. Obsługiwane są również operacje na klawiaturze (spacja, tabulatory).
Oczywiście dzięki temu możesz zmienić wartość contentswoich potrzeb i użyć obrazu, jeśli chcesz, lub użyć innej czcionki ...
Najważniejsze jest tutaj:
Rozmiar pola wyboru pozostaje proporcjonalny do rozmiaru tekstu
Możesz kontrolować proporcje, kolor, rozmiar pola wyboru
Nie potrzebujesz dodatkowego HTML!
Potrzebne są tylko 3 wiersze CSS (ostatni z nich to tylko pomysły)
Edycja : jak wskazano w komentarzu, pole wyboru nie będzie dostępne przy użyciu klawiszy nawigacyjnych. Prawdopodobnie powinieneś dodać tabindex=0jako właściwość swojej etykiety, aby można ją było ustawić.
@robertjd zgodził się, był zdezorientowany, dlaczego miałoby to być potrzebne do prostej transformacji
Neil Chowdhury
@robertjd Nie są to nawet pola wyboru; są przełączane.
TylerH
14
Wygląd pól wyboru wydaje się być domyślnie naprawiony. Ale jak wskazał Worthy7, można temu zaradzić za pomocą właściwości CSSappearance . Sprawi, że pola wyboru będą całkowicie puste, dzięki czemu będziesz mógł zdefiniować swój wygląd. Co jest miłego w tym: Możesz użyć istniejącego kodu HTML. Wada: to technologia eksperymentalna . Edge i IE nie używają stylu niestandardowego.
Myślę, że najprostszym rozwiązaniem jest zmiana stylu pola wyboru, jak sugerują niektórzy użytkownicy. Poniższy CSS działa dla mnie, wymaga tylko kilku wierszy CSS i odpowiada na pytanie OP:
Jak wspomniano w tym poście, właściwość zoom wydaje się nie działać w przeglądarce Firefox, a przekształcenia mogą powodować niepożądane efekty.
Testowany na Chrome i Firefox powinien działać we wszystkich nowoczesnych przeglądarkach. Po prostu zmień właściwości (kolory, rozmiar, dół, lewo itp.) Zgodnie z własnymi potrzebami. Mam nadzieję, że to pomoże!
Rozumiem, że nie jest to wcale łatwe do zrobienia w różnych przeglądarkach. Zamiast próbować manipulować formantem pola wyboru, zawsze możesz zbudować własną implementację za pomocą obrazów, javascript i ukrytych pól wejściowych. Zakładam, że jest to podobne do tego, czym jest niceforms (z odpowiedzi Staicu lonut powyżej), ale nie byłoby szczególnie trudne do wdrożenia. Wierzę, że jQuery ma wtyczkę, która pozwala również na to niestandardowe zachowanie (poszuka linku i opublikuje tutaj, jeśli mogę go znaleźć).
Odpowiedzi:
Jest trochę brzydki (ze względu na zwiększenie skali), ale działa w większości nowszych przeglądarek:
źródło
transform: scale(2);
też, aby zapewnić więcej dla każdej przeglądarkiDziałające rozwiązanie dla wszystkich nowoczesnych przeglądarek.
Zgodność:
Wygląd:
źródło
transform
właściwości. Obsługuje IE 9,-ms-transform
którego można użyć, jednak niektórzy twierdzą, że jest dość podzielony na piksele, więc lepiej pozostawić IE 9 z domyślną.Łatwym rozwiązaniem jest skorzystanie z właściwości
zoom
:źródło
Wersja 2020 - przy użyciu pseudoelementów rozmiar zależy od rozmiaru czcionki.
Domyślne pole wyboru / radio jest renderowane poza ekranem, ale CSS tworzy elementy wirtualne bardzo podobne do elementów domyślnych. Obsługuje wszystkie przeglądarki, bez rozmycia. Rozmiar zależy od rozmiaru czcionki. Obsługiwane są również operacje na klawiaturze (spacja, tabulatory).
https://jsfiddle.net/ohf7nmzy/2/
Wersja 2017 - przy użyciu zoomu lub skali
Przeglądarka użyje niestandardowej
zoom
funkcji, jeśli jest obsługiwana (niezła jakość) lub standardowatransform: scale
(rozmazana).Skalowanie działa we wszystkich przeglądarkach, ale będzie rozmyte w Firefox i Safari .
https://jsfiddle.net/ksvx2txb/11/
źródło
Właśnie wyszłam z tym:
Oczywiście dzięki temu możesz zmienić wartość
content
swoich potrzeb i użyć obrazu, jeśli chcesz, lub użyć innej czcionki ...Najważniejsze jest tutaj:
Rozmiar pola wyboru pozostaje proporcjonalny do rozmiaru tekstu
Możesz kontrolować proporcje, kolor, rozmiar pola wyboru
Nie potrzebujesz dodatkowego HTML!
Potrzebne są tylko 3 wiersze CSS (ostatni z nich to tylko pomysły)
Edycja : jak wskazano w komentarzu, pole wyboru nie będzie dostępne przy użyciu klawiszy nawigacyjnych. Prawdopodobnie powinieneś dodać
tabindex=0
jako właściwość swojej etykiety, aby można ją było ustawić.źródło
display:none
na wejściu uniemożliwi wybranie gotab
kluczem, więc nie sądzę, że to dobry pomysł.Podgląd:
http://jsfiddle.net/h4qka9td/
źródło
Wygląd pól wyboru wydaje się być domyślnie naprawiony. Ale jak wskazał Worthy7, można temu zaradzić za pomocą właściwości CSS
appearance
. Sprawi, że pola wyboru będą całkowicie puste, dzięki czemu będziesz mógł zdefiniować swój wygląd. Co jest miłego w tym: Możesz użyć istniejącego kodu HTML. Wada: to technologia eksperymentalna . Edge i IE nie używają stylu niestandardowego.Oto potrzebne style CSS:
Zrzuty ekranu:
Chrom:
Firefox:
Krawędź:
TO ZNACZY:
źródło
Chciałem zrobić nieco większe pole wyboru i spojrzałem na kod źródłowy 37Signals Basecamp, aby znaleźć następujące rozwiązanie -
Możesz zmienić rozmiar czcionki, aby pole wyboru było nieco większe:
Następnie możesz odpowiednio wyrównać pole wyboru, wykonując:
źródło
Za pomocą tego atrybutu możesz zwiększyć pola wyboru w Safari - co jest ogólnie odporne na zwykłe podejścia -
-webkit-transform: scale(1.3, 1.3);
Źródło
źródło
Myślę, że najprostszym rozwiązaniem jest zmiana stylu pola wyboru, jak sugerują niektórzy użytkownicy. Poniższy CSS działa dla mnie, wymaga tylko kilku wierszy CSS i odpowiada na pytanie OP:
Jak wspomniano w tym poście, właściwość zoom wydaje się nie działać w przeglądarce Firefox, a przekształcenia mogą powodować niepożądane efekty.
Testowany na Chrome i Firefox powinien działać we wszystkich nowoczesnych przeglądarkach. Po prostu zmień właściwości (kolory, rozmiar, dół, lewo itp.) Zgodnie z własnymi potrzebami. Mam nadzieję, że to pomoże!
źródło
Rozumiem, że nie jest to wcale łatwe do zrobienia w różnych przeglądarkach. Zamiast próbować manipulować formantem pola wyboru, zawsze możesz zbudować własną implementację za pomocą obrazów, javascript i ukrytych pól wejściowych. Zakładam, że jest to podobne do tego, czym jest niceforms (z odpowiedzi Staicu lonut powyżej), ale nie byłoby szczególnie trudne do wdrożenia. Wierzę, że jQuery ma wtyczkę, która pozwala również na to niestandardowe zachowanie (poszuka linku i opublikuje tutaj, jeśli mogę go znaleźć).
źródło
Uważam, że ta biblioteka tylko CSS jest bardzo pomocna: https://lokesh-coder.github.io/pretty-checkbox/
Możesz też stworzyć własną z tą samą podstawową koncepcją, podobną do tej, którą opublikował @Sharcoux. Jest to w zasadzie:
input:checked~div label
dla sprawdzonego stylu<label>
można go kliknąćfor=yourinputID
źródło
Problem polega na tym, że Firefox nie słucha szerokości i wysokości. Wyłącz to i twój dobry start.
źródło
Inne odpowiedzi pokazały piksele, a ja chciałem czegoś pięknego. Wynik wygląda następująco:
Chociaż ta wersja jest bardziej skomplikowana, myślę, że warto spróbować.
JSFiddle: https://jsfiddle.net/asbd4hpr/
źródło
możesz zmienić wysokość i szerokość w poniższym kodzie
źródło