How can I place a checkbox within a button? [closed]


Tags: html,css

Problem :

I am using Bootstrap and want to place a checkbox within a button, similar to what is done with Gmail to select all messages. I have looked at the Gmail CSS but have been unable to determine how they've done it.

checkbox button



Solution :

Here is a simple example, made of DIVs with some CSS and a little jQuery to check the checkbox when the button is clicked:

jsFiddle demo

HTML:

<div id="container">
    <div id="btnOuterDIV">
        <div id="btnChkbox">
            <input type="checkbox" id="btnCB" />
        </div>
    </div>
</div>

CSS:

#container  {padding:50px;}
#btnOuterDIV{height:30px;width:80px;border:1px solid #ccc;border-radius:5px;}
#btnOuterDIV:hover{border-color:#888;cursor:pointer;}
#btnChkbox{height:15px;width:15px;padding-top:5px;padding-left:5px;}

jQuery:

$('#btnOuterDIV').click(function(){
    alert('You clicked the button');
    $('#btnCB').prop('checked',true);
});

Edit:

Button text (a label) added to the button: http://jsfiddle.net/crrojLho/2/


    CSS Howto..

    Why won't my SVG's show?

    How do I center text next to a floating image using css?

    How can i achieve this style in Html/Css?

    How do I return all CSS properties applied to an element by an external stylesheet class (not get computed styles!)?

    How to center a component without knowing its width in Css

    How to position div element right below and left-aligned to another div

    How can I add value to textbox, instead of setting value

    How to make a vertical bar that follows its user in a specific area?

    How to animate X number of divs using CSS and javascript?

    Show div on button click with multiple divs

    How to show a div thats hidden by css on button click

    How to turn off :hover with CSS?

    How do I use CSS with simple form?

    how to align elements using css in angular typeahead

    What is the best tutorial or tutorials on how to make a tooltip using CSS or JQuery or Both? [closed]

    views_slideshow controls modification Drupal 7

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    Using CSS, how do I move a DIV to the left of the centre position?

    how to read value of style[“display”] property of webcontrol

    How to put all of the images from folder into CSS box

    How can I use True Type Collection (.ttc) in JavaFX?

    how to improve this CSS layout which look like a table [closed]

    How to change css of element using jquery

    How to print outlines and background colors from css, when using JQuery printElement, and IE8?

    How to make a scrolling website mobile friendly?

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    Dilemma in deciding how to create CSS for H1, H2, H3 etc

    how to change a css of an input if the value of it is not empty in angularJS

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    How to truncate paragragh lines in css [duplicate]