Zwiększ rozmiar pola wyboru w HTML


Czy istnieje sposób na zwiększenie rozmiaru pola wyboru w HTML?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jednym ze sposobów zmiany rozmiaru pola wyboru jest przeskalowanie go za pomocą CSS:
input[type=checkbox] {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
padding: 10px;
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Nie w prostym znaczeniu dla różnych przeglądarek.
Największą elastyczność uzyskuje się, zastępując ją kontrolką, która korzysta z JavaScript i CSS. Użyj standardowego pola wyboru jako rezerwy.
Obecnie można również utworzyć element
label
za pomocą pseudo-selektora
: selected
.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

To działa dla mnie.
<input type="checkbox" id="check" onclick="checked()" style="width:20px;height:20px;"/>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Nie, większość przeglądarek ignoruje styl CSS szerokości lub wysokości pola wyboru. Istnieją dwa sposoby obejścia tego problemu:
  • Użyj tagu
    label
    , aby kliknięcie innego elementu również wyzwalało tag pola tekstowego.
  • Utwórz własne pole wyboru za pomocą JavaScript, przełączając obraz i wypełniając ukryte pole wprowadzania.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Dużo szukałem i ostatecznie utworzyłem niestandardowe pole wyboru. Kod to
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".CheckBoxClass").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}else{
$(this).next("label").removeClass("LabelSelected");
}
});
});
</script>

Styl jest
.CheckBoxLabelClass{
background: url("uncheck222.png") no-repeat;
padding-left: 5px;
padding-top: 3px;
padding-right: 10px;
margin: 5px;
height: 60px;
width: 60px;
display: block;
}.CheckBoxLabelClass:hover{
text-decoration: underline;
}.LabelSelected{
background: url("check1111.png") no-repeat;
padding-left: 5px;
padding-top: 3px;
padding-right: 10px;
margin: 5px;
height: 60px;
width: 60px;
display: block;}

Kod pola wyboru to:
<input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass"></label>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Sztuczka polegająca na zwiększeniu rozmiaru pola wyboru HTML polega na zwiększeniu właściwości skalowania danych wejściowych.
Jest kompatybilny z różnymi przeglądarkami, a także dostosowuje rozmiar do rozdzielczości urządzenia.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
.daysCheckbox1{
zoom:1;}.daysCheckbox2{
zoom:1.5;}.daysCheckbox3{
zoom:2;}.daysCheckbox4{
zoom:2.5;}

<pre class="snippet-code-html lang-html prettyprint-override">
<label> Checkbox 1<input type="checkbox" class="daysCheckbox1" name="Monday"></label><Br>
<label> Checkbox 2<input type="checkbox" class="daysCheckbox2" name="Monday"></label><Br>
<label> Checkbox 3<input type="checkbox" class="daysCheckbox3" name="Monday"></label><Br>
<label> Checkbox 4<input type="checkbox" class="daysCheckbox4" name="Monday"></label><Br>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jednym ze sposobów jest umieszczenie elementu checkbox wewnątrz elementu div i zmiana rozmiaru elementu div za pomocą px.
Teraz ustaw wysokość i szerokość elementu checkbox na 100% elementu div.
<style>
*Reset*
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*Changing the height of the body for better view*
body {
height: 1000px;
}
*Increasing the height and width of the div element*
div {
width: 100px;
height: 100px;
background-color: brown;
margin: auto;
margin-top: 100px;
}
*setting the height and width of the input to 100% of the div element*
input {
height: 100%;
width: 100%;
}
</style><body>
<div>
<input type="checkbox" name="" id="">

</body>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz utworzyć niestandardowe pole wyboru z 2 obrazami, przełączać się między sobą
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Ustaw rozmiar czcionki pola wyboru na około 5em. Pracował dla mnie.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się