I have an input type search, when there is text inside there is a clear all button which is perfect, but when losing focus of the text box the X disappears .. is there a way to keep the x visible whilst there is text inside the box?

this is my css to show the x button as bootstrap is currently overwritting it, i am doing it manually:

<input type="search" name="name" value="" placeholder="Search..." />

input[type="search"]::-webkit-search-cancel-button {
    /* Remove default */
    -webkit-appearance: none;
    background: grey;
    mask-image: url("../Images/icons/close-icon.svg");
    height: 20px;
    width: 20px;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url("../Images/icons/close-icon.svg");
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

I have tried setting the opacity to 1, in the css to always show but doesnt work