Checkboxes in web pages – how to make them bigger?

前端 未结 7 1128
南笙
南笙 2021-01-30 01:57

The standard checkboxes rendered in most browsers are quite small and don’t increase in size even when a larger font is used. What is the best, browser-independent way to displ

相关标签:
7条回答
  • 2021-01-30 02:30

    Pure modern 2020 CSS only decision, without blurry scaling or non-handy transforming. And with tick! =)

    Works nice in Firefox and Chromium-based browsers.

    So, you can rule your checkboxes purely ADAPTIVE, just by setting parent block's font-height and it will grow with text!

    input[type='checkbox'] {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      vertical-align: middle;
      outline: none;
      font-size: inherit;
      cursor: pointer;
      width: 1.0em;
      height: 1.0em;
      background: white;
      border-radius: 0.25em;
      border: 0.125em solid #555;
      position: relative;
    }
    
    input[type='checkbox']:checked {
      background: #adf;
    }
    
    input[type='checkbox']:checked:after {
      content: "✔";
      position: absolute;
      font-size: 90%;
      left: 0.0625em;
      top: -0.25em;
    }
    <label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>
    <label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>

    0 讨论(0)
  • 2021-01-30 02:31

    Here's a trick that works in most recent browsers (IE9+) as a CSS only solution that can be improved with javascript to support IE8 and below.

    <div>
      <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
      <label for="checkboxID"> </label>
    </div>
    

    Style the label with what you want the checkbox to look like

    #checkboxID
    {
      position: absolute fixed;
      margin-right: 2000px;
      right: 100%;
    }
    #checkboxID + label
    {
      /* unchecked state */
    }
    #checkboxID:checked + label
    {
      /* checked state */
    }

    For javascript, you'll be able to add classes to the label to show the state. Also, it would be wise to use the following function:

    $('label[for]').live('click', function(e){
      $('#' + $(this).attr('for') ).click();
      return false;
    });
    

    EDIT to modify #checkboxID styles

    0 讨论(0)
  • 2021-01-30 02:34

    In case this can help anyone, here's simple CSS as a jumping off point. Turns it into a basic rounded square big enough for thumbs with a toggled background color.

    input[type='checkbox'] {
        -webkit-appearance:none;
        width:30px;
        height:30px;
        background:white;
        border-radius:5px;
        border:2px solid #555;
    }
    input[type='checkbox']:checked {
        background: #abd;
    }
    <input type="checkbox" />

    0 讨论(0)
  • 2021-01-30 02:47

    Actually there is a way to make them bigger, checkboxes just like anything else (even an iframe like a facebook button).

    Wrap them in a "zoomed" element:

    .double {
      zoom: 2;
      transform: scale(2);
      -ms-transform: scale(2);
      -webkit-transform: scale(2);
      -o-transform: scale(2);
      -moz-transform: scale(2);
      transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
    }
    <div class="double">
      <input type="checkbox" name="hello" value="1">
    </div>

    It might look a little bit "rescaled" but it works.

    Of course you can make that div float:left and put your label besides it, float:left too.

    0 讨论(0)
  • 2021-01-30 02:47

    Try this CSS

    input[type=checkbox] {width:100px; height:100px;}
    
    0 讨论(0)
  • 2021-01-30 02:47

    I'm writtinga phonegap app, and checkboxes vary in size, look, etc. So I made my own simple checkbox:

    First the HTML code:

    <span role="checkbox"/>
    

    Then the CSS:

    [role=checkbox]{
        background-image: url(../img/checkbox_nc.png);
        height: 15px;
        width: 15px;
        display: inline-block;
        margin: 0 5px 0 5px;
        cursor: pointer;
    }
    
    .checked[role=checkbox]{
        background-image: url(../img/checkbox_c.png);
    }
    

    To toggle checkbox state, I used JQuery:

    CLICKEVENT='touchend';
    function createCheckboxes()
    {
        $('[role=checkbox]').bind(CLICKEVENT,function()
        {
            $(this).toggleClass('checked');
        });
    }
    

    But It can easily be done without it...

    Hope it can help!

    0 讨论(0)
提交回复
热议问题