Zwiększ rozmiar pola wyboru w HTML


Czy istnieje sposób na zwiększenie rozmiaru pola wyboru w HTML?
2021-03-02 Dodaj komentarz
Udostępnij to

Nie znaleziono powiązanych wyników

    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;
    
}
    2021-03-02 0 0
    Udostępnij to
    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
    .
    2021-03-02 0 0
    Udostępnij to
    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;"/>
    2021-03-02 0 0
    Udostępnij to
    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.
    2021-03-02 0 0
    Udostępnij to
    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>
    2021-03-02 0 0
    Udostępnij to
    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>
    2021-03-02 0 0
    Udostępnij to
    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>
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Możesz utworzyć niestandardowe pole wyboru z 2 obrazami, przełączać się między sobą
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Ustaw rozmiar czcionki pola wyboru na około 5em. Pracował dla mnie.
    2021-03-02 0 0
    Udostępnij to
    Dlaczego jest złożony? 0 odpowiedzi zostało zwiniętych

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

    Polityka prywatności: https://zweryfikowac.pl/Polityka-prywatnosci.pdf
    Copyright © 2023, All Rights Reserved