Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link href="http://view.jqueryui.com/button/themes/base/all.css" rel="stylesheet">
  <script src="http://view.jqueryui.com/button/ui/core.js"></script>
  <script src="http://view.jqueryui.com/button/ui/widget.js"></script>
  <script src="http://view.jqueryui.com/button/ui/checkboxradio.js"></script>
</head>
<body>
<form>
  <ul class="fieldcontain">
    <li class="ui-helper-clearfix">
      <label for="checkboxradio-toggle" class="field-input">Label Text</label>
      <label for="checkboxradio-toggle">I activate my toggle</label>
      <input class="toggle fieldlabel" id="checkboxradio-toggle" type="checkbox"/>
    </li>
    <li class="ui-helper-clearfix">
      <fieldset>
        <legend class="field-label">I don't activate my toggle</legend>
        <label  class="field-input" for="checkboxradio-toggle2">Toggle2</label>
        <input class="toggle" id="checkboxradio-toggle2" type="checkbox"/>
      </fieldset>
    </li>
    <li class="ui-helper-clearfix">
      <label for="text-field" class="field-label">Text field label</label>
      <input class="field-input" class="toggle" id="text-field" type="text"/>
    </li>
    <li class="ui-helper-clearfix">
      <label for="select-field" class="field-label">Select Label</label>
      <select id="select-field" class="field-input">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </li>
  </ul>
</form>
</body>
</html>
 
.fieldcontain {
  width: 100%;
  background: #ccc;
  list-style:none;
  padding: 0;
}
.fieldcontain li {
  padding: 3px;
  border: 1px solid #888;
}
​
.fieldcontain li .field-label{ 
  float: left;
  width: 20%;
}
​
.fieldcontain li .field-input{
  float:right;
  display:inline;
  width: 70%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
  height:90%;
}
fieldset {
  margin: 0;
  padding: 0;
  border:none;
}
.ui-button .ui-icon {
  float:left;
  margin-top: 0;
}
 
$(function(){
  $( ".toggle" ).checkboxradio();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
arschmitzpro
0viewers