CSS Input Textbox Styles | Animation Effects

CSS Textbox Styles. input text effects, input focus effect, transform CSS style textbox, change input type text style

Input Type Search Clear Icon Button Function

Input Type Search Clear Value Event With Code Examples. To clear the value in an input textbox you don't have to delete the entire thing manually, you can clear everything by clicking a (X)button. The code for that is given below

When you click on the clear icon button the input textbox will clear, when the previously searched content is there you can also add a callback function to delete it.

Demo input textbox clear. type something
HTML
<div class="input-wrap">
    <input type="text" id="search" class="input-text" placeholder="search">
    <span id="clear-search" title="clear">×</span>
</div>
CSS
.input-wrap {
    position: relative;
    display: inline-block;
}
input#search {
    padding: 8px 5px;
    padding-right: 24px;
}
#clear-search {
    display: none;
    position: absolute;
    right: 3px;
    top: 2px;
    bottom: 1px;
    padding: 0px 5px;
    font-size: 25px;
    user-select: none;
    cursor: pointer;
    color: #9e9e9e;
    z-index: 12;
    height: 33px;
    justify-content: center;
    align-items: center;
    font-family: Arial,Helvetica,sans-serif;
}
input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
JavaScript
(() => {
    const clear_icon = document.getElementById("clear-search");
    const serch_input = document.getElementById("search");

    const showClearIcon = event => {
        let search_value = event.target.value;
        if (search_value.length > 0) {
            clear_icon.style.display = "flex";
        }else{
            clear_icon.style.display = "none";
        }
    };
    const hideClearIcon = () => {
        clear_icon.style.display = "none";
        serch_input.value = '';

        // add callback()
        console.log("input cleared");
    };

    serch_input.addEventListener("input", showClearIcon);
    clear_icon.addEventListener("click", hideClearIcon);
})();
Try it Yourself

How to Toggle Password Visibility Using JavaScript

Password Show Hide Toggle using HTML CSS & JavaScriptn. Show hide password eye icon HTML CSS, The following JavaScript code is used to show and hide the password on input type password. Copy and paste the below code into your webpage

Demo show hide password. type something
HTML
<div class="input-wrap">
    <input type="password" id="password" class="input-text" placeholder="password">
    <span id="show-pass" class="fa fa-eye" title="show hide password"></span>
</div>
CSS
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

.input-wrap {
    position: relative;
    display: inline-block;
}
input#password {
    padding: 8px 5px;
    padding-right: 24px;
}
#show-pass {
    width: 30px;
    position: absolute;
    right: 2px;
    top: 2px;
    bottom: 2px;
    cursor: pointer;
    z-index: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 16px;
}
.fa-eye:before {
    content: "\f06e";
}
.fa-eye-slash:before {
    content: "\f070";
}
JavaScript
(() => {
    const password = document.getElementById("password");
    const showBtn = document.getElementById("show-pass");

    const showHidePassword = () => {
        if(password.type == "password"){
           password.type = "text";
           showBtn.classList.add("fa-eye-slash");
        }else{
           password.type = "password";
           showBtn.classList.remove("fa-eye-slash");
        }
  };
  showBtn.addEventListener("click", showHidePassword);

})();
Try it Yourself

Select CSS Input Textbox Styles

Textbox border animation and shadow animation...

Report Problem