-
tthlan
- Quản trị viên
- Posts: 76
- Joined: Tue Aug 23, 2016 8:13 am
Post
by tthlan »
css
Code: Select all
.deleteSearchBox.clear-btn::after {
content: 'x';
position: relative;
right: 105px;
cursor: pointer;
}
html
Code: Select all
<div class="deleteSearchBox">
<input type="text" id="search-keyword" name="keyword" class="keyword text-box">
<input type="button" id="search" value="Search" name="search" class="button-default button-save">
</div>
js
Code: Select all
$(".deleteSearchBox").click(function(){
$('#search-keyword').val('');
$('.deleteSearchBox').removeClass('clear-btn');
});
$('#search-keyword').keyup(function(){
if($('#search-keyword').val() !== null && $('#search-keyword').val().length > 0){
$('.deleteSearchBox').addClass('clear-btn');
}
if($('#search-keyword').val().length === 0){
$('.deleteSearchBox').removeClass('clear-btn');
}
});
-
tthlan
- Quản trị viên
- Posts: 76
- Joined: Tue Aug 23, 2016 8:13 am
Post
by tthlan »
css
Code: Select all
.clear-btn {
display: none;
position: absolute;
top: 40px;
}
.clear-btn::after {
content: 'x';
position: relative;
right: 20px;
cursor: pointer;
}
js
Code: Select all
$(".clear-btn").click(function(){
$('#search-keyword').val('');
$('.deleteSearchBox').removeClass('clear-btn');
$(this).css('display','none');
});
$('#search-keyword').keyup(function(){
if($('#search-keyword').val() !== null && $('#search-keyword').val().length > 0){
// $('.deleteSearchBox').addClass('clear-btn');
$(".clear-btn").css('display','inline-block');
}
if($('#search-keyword').val().length === 0){
// $('.deleteSearchBox').removeClass('clear-btn');
$(".clear-btn").css('display','none');
}
});
html
Code: Select all
<div class="deleteSearchBox">
<input type="text" id="search-keyword" name="keyword" class="keyword text-box">
<div class="clear-btn"></div>
<input type="button" id="search" value="Search" name="search" class="button-default button-save">
</div>