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..

    How to change css rules of external stylesheet [duplicate]

    How to include css files into compojure project?

    How to use css value for javascript in IF-THEN construction? [closed]

    How can i make the picture zoom in with css when my picture is 100% width in a bootstrap column?

    How do you extend a Django project root HTML file in project apps?

    CSS media type: How to load CSS for mobile?

    How to copy the CSS to another tab in Chrome?

    how do I use the :valid and :invalid selectors for css?

    How to convert a JSON object (created by jquery-css-parser) back to valid CSS code? [closed]

    CSS - how to apply styles to first elements in a static generated list

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    How to locate which css include is used for an element

    Linking CSS button to email - How can it be done?

    How to position a fixed div under another fixed div?

    How to make height squeeze with css

    How to enable real time CSS editing in chrome?

    How can I make an div span the entire width of my screen

    How do I trace my inner pages via google analytics?

    How do you create a scrollbar that recognizes scrolling only for the current topmost container using css?

    CSS - Get image to show text overlayed on top of the image on hover?

    How to get custom css to load after richfaces?

    CSS: How to select only the first non-adjacent sibling after the element

    How to I bring my sticky navbar in front of the contents on my page?

    How to print the CSS stylesheet for PPI::HTML highlight? [closed]

    How to Jump-Start PhoneGap App Development [closed]

    HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?

    how to “replace” css Properties with jQuery

    How can I display links in 2 rows?

    how to use css button to post method in a form?

    How to create a progress bar