<html>
<head>
<title>Styling Bootstrap Select</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">
<div class="form">
<input type="text" class="form-control" placeholder="Enter your name">
<input type="text" class="form-control" placeholder="Enter your address">
<input type="text" class="form-control" placeholder="Enter your contact info">
<select class="selectpicker form-control">
<option selected="selected">Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
</body>
</html>
.form {
max-width: 330px;
padding: 15px;
padding-top: 120px;
margin: 0 auto;
}
.form .form-heading {
margin-bottom: 20px;
text-align: center;
}
.form .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form .form-control:focus {
z-index: 2;
}
.form input[type="text"] {
margin-bottom: -1px;
border-radius: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.