"Custom Clear Button for text box"
Bootstrap 3.0.0 Snippet by sachinkul6185@gmail.com

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 right-border-pad"><input type="text" class="form-control custom-input" placeholder="Enter any thing" onblur="ToggleCrossIcon(this,false)", onfocus="ToggleCrossIcon(this,true)" /><span class="my-cross fa fa-times" aria-hidden="true" onclick="ClearTextValue(this)">x</span></div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.my-cross{
position: absolute;
right: 15px;
top: 50%;
background: #137fb0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
border-radius: 50%;
padding: 2px;
width: 20px;
height: 20px;
text-align: center;
line-height: 16px;
display:none;
cursor:pointer;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
function ClearTextValue(ctrl) {
$(ctrl).prev().val("");
}
function ToggleCrossIcon(ctrl, isShow) {
if (isShow)
$(ctrl).next().show();
else
setTimeout(function(){
$(ctrl).next().hide();
},300)
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class
Hexa shape button

Questions / Comments: