Any way to put an X on input field to clear itself

[hidroxid]

Hello

Porto HTML has option to show an X on input fields for clear it?

In this moment i am using a button with class=”input-group-append”, but it use so much space.

Thanks!

---

[Support]

Hello, please check these examples:

<div class="container shadow min-vh-100 py-4">
    <div class="row">
        <div class="col-md-5 mx-auto">
            <div class="small fw-light">search input with icon</div>
            <div class="input-group">
                <input class="form-control border-end-0 border rounded-pill" type="search" value="search" id="example-search-input">
                <span class="input-group-append">
                    <button class="btn btn-outline-secondary bg-white border-bottom-0 border rounded-pill ms-n5" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-md-5 mx-auto">
            <div class="small fw-light">rounded search input only (with close X)</div>
            <div class="input-group">
                <input class="form-control border rounded-pill" type="search" value="search" id="example-search-input">
            </div>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-md-5 mx-auto">
            <div class="small fw-light">rounded search input with icon</div>
            <div class="input-group">
                <input class="form-control border-end-0 border" type="search" value="search" id="example-search-input">
                <span class="input-group-append">
                    <button class="btn btn-outline-secondary bg-white border-start-0 border-bottom-0 border ms-n5" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-md-5 mx-auto">
            <div class="small fw-light">search input only (with close X)</div>
            <div class="input-group">
                <input class="form-control border" type="search" value="search" id="example-search-input">
            </div>
        </div>
    </div>
</div>

CSS:

.ms-n5 {
    margin-left: -40px;
}

Let me know if you have any questions.

Kind Regards,

Jonas

---

[Author]

Posts