Vergrößerungsglas vergrößern Symbol innerhalb des Eingabetyps = "search" Element

Question

Hallo, wie kann ich die "Größe" des Lupensymbols innerhalb des input type = "search" Elements erhöhen. Ich benutze jQueryMobile.

habe ich versucht, diese so weit:

.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; 
} 

Mein FIDDLE.

Leider konnte ich auch nach der Verwendung des Browser Inspectors keine weiteren Informationen finden.

Answer 1

Ihr Selektor (.ui-input-search:after ist richtig) war falsch und es ist ein Hintergrundbild, kein Font-Icon, also hat die Schriftgröße keinen Einfluss auf das angezeigte Vergrößerungssymbol.

Folgendes sollten Ihnen eine Idee geben, wie es funktioniert:

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

Answer 2

2 Dinge falsch mit dem Code

1) Die Lupe ist kein Text, sondern ein Bild, so dass Sie offensichtlich erhöhen kippt die font-size davon noch die Breite oder Höhe. Sie müssen das Bild durch ein größeres ersetzen ODER steuern Sie es mit background-size dann erhöhen Sie die Breite & Höhe, um die Hintergrundgröße anzupassen.

.ui-input-search:after{ 
    background-size: 25px 25px; 
    width: 25px; 
    height: 25px; 
} 

2) Sie versuchen, dieses Symbol zu steuern .ui-icon-search:after verwendet, die falsch ist. Die :after ist auf .ui-input-search:after.

Answer 3

Da es sich um ein Hintergrundbild handelt, ändert sich die Schriftgröße nicht. Statt -

Zuerst machen background-size größer wie:

.ui-alt-icon.ui-icon-search::after, .ui-alt-icon .ui-icon-search::after, .ui-input-search::after { 
    background-size: 20px 20px; 
} 

Dann nach dieser background-size können Sie die element erhöhen ‚s height, width wie:

.ui-input-search::after{ 
    height: 20px; 
    width: 20px; 
} 

die Geige Siehe: https://jsfiddle.net/1417fjt9/1/