Wie kann ich die Größe der Bootstrap-checkbox?

Wundern, wenn die Möglichkeit zum ändern der Größe von checkbox wie ist es möglich mit den Tasten. Ich möchte es größer sein, so macht es einfach zu drücken. Jetzt ist es sah aus wie dieser:

Wie kann ich die Größe der Bootstrap-checkbox?

Code:

 <div class="form-group">
    <label  class="col-md-7 control-label">Kalsiumklorid: </label>
    <div class="col-md-5" >
      {{ Form::checkbox('O_Kals_Klor', 1 , array('class' => 'form-control' ))  }}  
    </div>
  </div>
InformationsquelleAutor user3185936 | 2014-03-30
  1. 30

    Oder Sie können es Stil mit Pixel.

     .big-checkbox {width: 30px; height: 30px;}
    • funktioniert in chrome, aber nicht im firefox 🙁 aufgehört zu testen da.
    • Ich benutze diese nur für mobile seit dem Markierungsfeld "Standard" - Größe ist zu klein für einen finger, um bequem Tippen Sie auf es, und es funktionierte auf dem mobilen Browser die ich ausprobiert habe.
    • Vielen Dank an Sie, ich wollte nicht stören versucht diese ein. Ich habe gerade extra Raum am oberen und unteren Rand das Kontrollkästchen, um es spürbar.
    InformationsquelleAutor Rachel S
  2. 13

    Ist es möglich in css, aber nicht für alle Browser.

    Den Effekt auf allen Browsern:

    http://www.456bereastreet.com/lab/form_controls/checkboxes/

    Möglichkeit ist ein custom checkbox mit javascript:

    http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

    • Vielen Dank, mit javascript-wie erhöhe ich die Größe dieser checkbox: jsfiddle.net/M5B3a
    InformationsquelleAutor Companjo
  3. 13
    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 */
  padding: 10px;
}
    • Das ist eine gute Lösung, aber ich habe Probleme mit dem Abstand zwischen checkbox und label.
    • nur aber 1 oder 2 &nbsp; vor dem Etikett 🙂
    InformationsquelleAutor SANA
  4. 8

    Ist es möglich, zu implementieren benutzerdefinierter bootstrap Kontrollkästchen für die meisten gängigen Browser heutzutage.

    Können Sie überprüfen, meine Bootstrap-Checkbox - Projekt in GitHub, die enthält einfach .weniger Datei.
    Es ist ein guter Artikel in MDN beschreiben einige Techniken, in denen die beiden wichtigsten sind:

    1. Label leitet ein click-Ereignis.

      Label umleiten kann ein click-Ereignis an sein Ziel, wenn er die for Attribut wie in <label for="target_id">Text</label> <input id="target_id" type="checkbox" /> oder wenn es enthält eine Eingabe wie im Bootstrap-Fall: <label><input type="checkbox" />Text</label>.

      Es bedeutet, dass es möglich ist, um ein Etikett in eine Ecke des Browsers, klicken Sie auf es, und dann das label redirect click-Ereignis der checkbox befindet sich in der anderen Ecke produzieren aktivieren/deaktivieren Aktion für die checkbox.

      Können wir ausblenden original checkbox optisch, aber es ist immer noch arbeiten, und unter click-Ereignis des Labels. In der Bezeichnung selbst können wir emulieren " mit einem tag-oder pseudo-element :before :after.

    2. Allgemeinen nicht unterstützt-tag für alte Browser

      Einige alte Browser unterstützt nicht mehrere CSS-Funktionen, wie das auswählen Geschwister p+p oder gezielte Suche input[type=checkbox]. Nach der MDN-Artikel Browsern, die diese Funktionen unterstützen, unterstützen auch :root CSS-Selektor, während andere nicht. Die :root Selektor wählt nur das root-element des Dokuments, die html in eine HTML-Seite. So ist es möglich, verwenden Sie :root für ein fallback für alte Browser und original Kästchen.

      Letzte code-snippet:

    CSS:

    :root {
  /* larger checkbox */
}
:root label.checkbox-bootstrap input[type=checkbox] {
  /* hide original check box */
  opacity: 0;
  position: absolute;
  /* find the nearest span with checkbox-placeholder class and draw custom checkbox */
  /* draw checkmark before the span placeholder when original hidden input is checked */
  /* disabled checkbox style */
  /* disabled and checked checkbox style */
  /* when the checkbox is focused with tab key show dots arround */
}
:root label.checkbox-bootstrap input[type=checkbox] + span.checkbox-placeholder {
  width: 14px;
  height: 14px;
  border: 1px solid;
  border-radius: 3px;
  /*checkbox border color*/
  border-color: #737373;
  display: inline-block;
  cursor: pointer;
  margin: 0 7px 0 -20px;
  vertical-align: middle;
  text-align: center;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder {
  background: #0ccce4;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder:before {
  display: inline-block;
  position: relative;
  vertical-align: text-top;
  width: 5px;
  height: 9px;
  /*checkmark arrow color*/
  border: solid white;
  border-width: 0 2px 2px 0;
  /*can be done with post css autoprefixer*/
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}
:root label.checkbox-bootstrap input[type=checkbox]:disabled + span.checkbox-placeholder {
  background: #ececec;
  border-color: #c3c2c2;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked:disabled + span.checkbox-placeholder {
  background: #d6d6d6;
  border-color: #bdbdbd;
}
:root label.checkbox-bootstrap input[type=checkbox]:focus:not(:hover) + span.checkbox-placeholder {
  outline: 1px dotted black;
}
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox] + span.checkbox-placeholder {
  width: 26px;
  height: 26px;
  border: 2px solid;
  border-radius: 5px;
  /*checkbox border color*/
  border-color: #737373;
}
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox]:checked + span.checkbox-placeholder:before {
  width: 9px;
  height: 15px;
  /*checkmark arrow color*/
  border: solid white;
  border-width: 0 3px 3px 0;
}

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>
 Original checkboxes:
</p>
<div class="checkbox">
      <label class="checkbox-bootstrap">                                        
          <input type="checkbox">             
          <span class="checkbox-placeholder"></span>           
          Original checkbox
      </label>
 </div>
 <div class="checkbox">
      <label class="checkbox-bootstrap">                                        
          <input type="checkbox" disabled>             
          <span class="checkbox-placeholder"></span>           
          Original checkbox disabled
      </label>
 </div>
 <div class="checkbox">
      <label class="checkbox-bootstrap">                                        
          <input type="checkbox" checked>             
          <span class="checkbox-placeholder"></span>           
          Original checkbox checked
      </label>
 </div>
  <div class="checkbox">
      <label class="checkbox-bootstrap">                                        
          <input type="checkbox" checked disabled>             
          <span class="checkbox-placeholder"></span>           
          Original checkbox checked and disabled
      </label>
 </div>
 <div class="checkbox">
      <label class="checkbox-bootstrap checkbox-lg">                           
          <input type="checkbox">             
          <span class="checkbox-placeholder"></span>           
          Large checkbox unchecked
      </label>
 </div>
  <br/>
<p>
 Inline checkboxes:
</p>
<label class="checkbox-inline checkbox-bootstrap">
  <input type="checkbox">
  <span class="checkbox-placeholder"></span>
  Inline 
</label>
<label class="checkbox-inline checkbox-bootstrap">
  <input type="checkbox" disabled>
  <span class="checkbox-placeholder"></span>
  Inline disabled
</label>
<label class="checkbox-inline checkbox-bootstrap">
  <input type="checkbox" checked disabled>
  <span class="checkbox-placeholder"></span>
  Inline checked and disabled
</label>
<label class="checkbox-inline checkbox-bootstrap checkbox-lg">
  <input type="checkbox" checked>
  <span class="checkbox-placeholder"></span>
  Large inline checked
</label>

    • Fantastische Sachen. Funktioniert wie ein Charme. Dank
    InformationsquelleAutor Artru
  5. 2

    Ich nur "speichern in "zoom", im Beispiel:

    .my_checkbox {
    width:5vw;
    height:5vh;
}
    InformationsquelleAutor Alex
  6. 1

    Ich habe diese Bibliothek mit Erfolg

    http://plugins.krajee.com/checkbox-x

    Es erfordert jQuery und bootstrap 3.x

    Laden Sie die zip hier: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

    Setzen Sie den Inhalt der zip in einen Ordner in Ihrem Projekt

    Pop die benötigten libs in deinem header

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>

    Hinzufügen der Daten steuert, um das element mit der data-size="xl" um die Größe zu ändern, wie hier gezeigt, http://plugins.krajee.com/cbx-sizes-demo 

    <label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>

    Gibt es zahlreiche andere Funktionen, wenn Sie die plugin-site.

    InformationsquelleAutor DropHit
  7. 1
    <div id="rr-element">
   <label for="rr-1">
      <input type="checkbox" value="1" id="rr-1" name="rr[]">
      Value 1
   </label>
</div>
//do this on the css
div label input { margin-right:100px; }
    InformationsquelleAutor SANA
Schreibe einen Kommentar