JSFiddle - React, Tailwind, and code Playground

by dreamyguy

HTML

<div class="search-form_phone clearfix visible-phone">
    <form id="searchform_phone" action="" method="get" target="">
        <input type="search" placeholder="Search" value="" name="q" class="search-form_phone_input-text">
        <button form="searchform_phone" type="submit" class="search-form_phone_button-submit">
            <span class="search-form_phone_button-text"><i class="icon-search"></i></span>
        </button>
        <button form="searchform_default" type="button" class="search-form_phone_button-clear">x</button>
    </form>
</div>

CSS

.search-form_phone { position: relative; margin-bottom: 26px; }
.resultpage .search-form_phone { display: none; }
.search-form_phone_input-text,
.search-form_phone_button-submit { float: left; }
.search-form_phone_input-text { border-style: solid; border-color: silver; border-width: 1px 0 1px 1px; padding: 0 5px 0 15px; height: 45px; font-size: 16px; color: #8e8e8e; width: 90%; border-radius: 0; -webkit-appearance: none; }
@media (max-width: 722px) { .search-form_phone_input-text { width: 89%; } }
@media (max-width: 661px) { .search-form_phone_input-text { width: 88%; } }
@media (max-width: 609px) { .search-form_phone_input-text { width: 87%; } }
@media (max-width: 565px) { .search-form_phone_input-text { width: 86%; } }
@media (max-width: 528px) { .search-form_phone_input-text { width: 85%; } }
@media (max-width: 496px) { .search-form_phone_input-text { width: 84%; } }
@media (max-width: 467px) { .search-form_phone_input-text { width: 83%; } }
@media (max-width: 442px) { .search-form_phone_input-text { width: 82%; } }
@media (max-width: 420px) { .search-form_phone_input-text { width: 81%; } }
@media (max-width: 400px) { .search-form_phone_input-text { width: 80%; } }
@media (max-width: 382px) { .search-form_phone_input-text { width: 79%; } }
@media (max-width: 366px) { .search-form_phone_input-text { width: 78%; } }
@media (max-width: 352px) { .search-form_phone_input-text { width: 77%; } }
@media (max-width: 338px) { .search-form_phone_input-text { width: 76%; } }
@media (max-width: 326px) { .search-form_phone_input-text { width: 75%; } }
@media (max-width: 314px) { .search-form_phone_input-text { width: 74%; } }
@media (max-width: 304px) { .search-form_phone_input-text { width: 73%; } }
@media (max-width: 294px) { .search-form_phone_input-text { width: 72%; } }
@media (max-width: 285px) { .search-form_phone_input-text { width: 71%; } }
@media (max-width: 277px) { .search-form_phone_input-text { width: 70%; } }
@media (max-width: 269px) {...

JavaScript

function clearBtn(selector) {
    var f = $("." + selector + "");
    var b = $("." + selector + "_button-clear");
    var iS = "." + selector + "_input-text";
    var i = $("" + iS + "");
    if (f.length > 0) {
        f.find("" + iS + "").keyup(function(){
            if($(this).val().length > 0) {
                b.fadeIn();
            } else {
                b.fadeOut();
            }
        });
        b.click(function(){
            b.hide(); // no effect, just clear
            i.val(""); 
        });
    }
}
clearBtn("search-form_phone");