How to style radio button or checkbox inside a bootstrap table?

Question

I wish to style radio buttons or checkboxes inside a Bootstrap Table using something like https://github.com/cosmicwheels/jquery-checkradios. However, I do not understand how this could be done since the actual corresponding input tags are created by join operations inside the javascript code (bootstrap-table.js). Is there any provision to supply CSS classes to style radio buttons inside Bootstrap table?

Firecracker

Yes, I'm aware that an entire row can be selected in that way. see for e.g. data-cell-style, data-row-style, data-formatter, class/data-classes. DOM probably can be manipulated in event handlers as well. However, my question is specific to styling of checkboxes or radio buttons. I saw that their properties can be manipulated using the data-formatter option: github.com/wenzhixin/bootstrap-table-examples/blob/master/…. But, any ideas about styling them? they don't seem to work by simply adding a class after they have been rendered. – Firecracker

Answer 1

Here's an example of styled radio buttons inside a Bootstrap Table. You can easily remove the JS snippets along with some CSS to make the Radio Buttons the only Clickable Element if that's the preferred option.

Font Awesome is used for the Radio Buttons so be sure to include it.

input[type=radio] {
    display: none;
}
label {
    cursor: pointer;
}
input[type=radio] + label:before {
    font-family:'FontAwesome';
    display: inline-block;
}
input[type=radio] + label:before {
    content:"\f10c";
    color: #f00;
    cursor: pointer;
}
input[type=radio] + label:before {
    letter-spacing: 10px;
}
input[type=radio]:checked + label:before {
    content:"\f111";
    color: #fff; /* Remove this if you remove the 3 Last Rules of the CSS */
}

Snippet

/* Delete the JS Below to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */

$('.table tr').click(function(event) {
  if (event.target.type !== 'radio') {
    $(':radio', this).trigger('click');
  }
});

$(":radio[name=radios]").change(function() {
  $(".table tr.active").removeClass("active");
  $(this).closest("tr").addClass("active");
});

.wrapper {
  margin-top: 40px;
}
.table-striped {
  background-color: rgba(77, 162, 179, 0.35);
  color: #4DA2B3;
}
.table-responsive {
  border-color: transparent;
  font-size: 20px;
  cursor: pointer;
  /* Remove this if you remove the 3 Last Rules Rules of the CSS */
}
.table tbody tr td {
  line-height: 24px;
  padding-top: 12px;
}
input[type=radio] {
  display: none;
}
label {
  cursor: pointer;
}
input[type=radio] + label:before {
  font-family: 'FontAwesome';
  display: inline-block;
  font-size: 20px;
  font-weight: 200;
}
input[type=radio] + label:before {
  content: "\f10c";
  /* The Open Circle Can be replaced with another Font Awesome Icon */
  color: #4DA2B3;
  cursor: pointer;
}
input[type=radio] + label:before {
  letter-spacing: 10px;
}
input[type=radio]:checked + label:before {
  content: "\f05d";
  /* Replace with f111 for a Solid Circle (or any other Font Awesome Icon */
  color: #fff;
  /* Remove this if you remove the 3 Last Rules of the CSS */
}
/* Delete the Rules Below (and 2 above with Comments) to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */

.table tbody tr:hover td {
  background-color: rgba(77, 162, 179, 0.55);
  color: #fff;
  border-bottom: 10px solid rgba(7, 101, 120, 0.85);
}
.table tbody tr.active td {
  background-color: rgba(77, 162, 179, 0.55);
  color: #fff;
}
.table tbody tr.active td label {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container">
    <div class="table-responsive col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <table class="table table-striped">
        <tbody>
          <tr>
            <td>Series A</td>
            <td>Product A</td>
            <td>
              <input type="radio" name="radios" id="radio1" />
              <label for="radio1">Yes</label>
            </td>
          </tr>
          <tr>
            <td>Series B</td>
            <td>Product B</td>
            <td>
              <input type="radio" name="radios" id="radio2" />
              <label for="radio2">No</label>
            </td>
          </tr>
          <tr>
            <td>Series C</td>
            <td>Product C</td>
            <td>
              <input type="radio" name="radios" id="radio3" />
              <label for="radio3">Maybe</label>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Pantechnicon

Youre welcome, if the answer worked please mark it as answered so other people can find it. Thanks! – Pantechnicon