Bootstrap Demo
Bootstrap Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .inputstl { padding: 9px; border: solid 1px #517B97; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CDDBE4), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #CDDBE4 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; } .frspan { border: solid 1px #517B97; background: #517B97; } </style> </head> <body> <div class="container"> <h1>Checkbox with textbox</h1> <div class="col-lg-3"> <div class="input-group"> <span class="input-group-addon frspan"> <input type="checkbox" aria-label="123"> </span> <input type="text" class="form-control inputstl" aria-label="123"> </div> </div> <div class="col-lg-3"> <div class="input-group"> <input type="text" class="form-control inputstl" aria-label="123"> <span class="input-group-addon frspan"> <input type="checkbox" aria-label="123"> </span> </div> </div> </div> </body> </html>
Checkbox with textbox