TheWandererr TheWandererr - 27 days ago 16
CSS Question

Increase magnifying glass Icon inside the input type="search" element


Hello, how can i increase the "size" of the magnifying glass Icon
inside the input type="search" element. I am using jQueryMobile.


I tried this so far:

.ui-input-text input, .ui-input-search input{
font-size: 24px !important;
height: 60px !important;
}

.ui-icon-search:after{
font-size: 300px !important;
width: 200px !important;
}


My FIDDLE.


Unfortunately i couldnt find more information even after using the browser Inspector.

Answer

Your selector (.ui-input-search:after is right) was wrong and it's a background-image not a font icon, so font-size won't have an effect on the displayed magnifying icon.

The following should give you an idea how it works:

.ui-input-search:after{
    display: block;
    width: 30px !important;
    height: 30px !important;
    background-size: contain;
}
Comments