Page 1 of 1

[CSS] Clear text box button by element after

Posted: Mon Sep 25, 2017 5:51 am
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');
        }
    });

Re: [CSS] Clear text box button by element after

Posted: Mon Sep 25, 2017 5:53 am
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>