Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Dateieingabeschaltfläche anpassen und das Textfeld in HTML ausblenden?
Wie kann ich die Dateieingabeschaltfläche anpassen und das Textfeld in HTML ausblenden?
- Patricia ArquetteOriginal
- 2024-11-01 16:51:02929Durchsuche
So stylen Sie um das Textfeld auszublenden und nur die Schaltfläche anzuzeigen
Stil kann eine Herausforderung sein, insbesondere wenn versucht wird, das Textfeld auszublenden und nur die Schaltfläche anzuzeigen.
CSS-Lösung
Um mit CSS den gewünschten Effekt zu erzielen, berücksichtigen Sie den folgenden Code:
<code class="html"><html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html></code>
Dieser CSS-Code erstellt eine Fakefile-Schaltfläche, die die echte Dateieingabe überlagert und das Textfeld mit der Deckkraft ausblendet: 0;.
Das obige ist der detaillierte Inhalt vonWie kann ich die Dateieingabeschaltfläche anpassen und das Textfeld in HTML ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!