Heim > Web-Frontend > HTML-Tutorial > Methode zum Definieren der Eingabetyp=Dateistil_HTML/Xhtml_Webseitenproduktion

Methode zum Definieren der Eingabetyp=Dateistil_HTML/Xhtml_Webseitenproduktion

WBOY
Freigeben: 2016-05-16 16:41:18
Original
1618 Leute haben es durchsucht

Warum die Dateikontrolle verschönern? Stellen Sie sich vor, die anderen Kinder sind alle ordentlich gekleidet und schön, aber zwei von ihnen schauen nicht auf Sie herab. Das ist so unharmonisch.

Die ursprüngliche Dateisteuerung sieht so aus:

Denken Sie nicht, dass dies aus einem Text und einer Schaltfläche besteht, es ist ein Steuerelement , der HTML-Code lautet:

Kopieren Sie den Code
Der Code lautet wie folgt:

>
In diesem Fall verwenden wir einen Text und eine Schaltfläche, um den Stil dieser Datei anzuzeigen. Der HTML-Code lautet wie folgt:



Code kopierenCode wie folgt:
='btn' value='Browse..' /> .getElementById('textfield').value= this.value" />

< ;/form>
div>


Die äußere Ebene von div soll eine Positionsreferenz für die Eingabe im Inneren bereitstellen, da sie beim Schreiben von Stilen relativ positioniert werden muss Das echte Dateisteuerelement deckt das simulierte ab und verbirgt dann das Dateisteuerelement (auch wenn das Dateisteuerelement nicht sichtbar ist). Der CSS-Code lautet also wie folgt:




Kopieren Sie den Code
Der Code lautet wie folgt: .file-box{ position:relative;width:340px} .txt{ height: 22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background- color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position :absolute; top:0; right:80px; filter:alpha(opacity:0 );opacity: 0;width:260px }




Rendering:

Endlich eine DEMO hinterlassen: Klicken Sie, um die Demo anzuzeigen
Methode zum Definieren der Eingabetyp=Dateistil_HTML/Xhtml_Webseitenproduktion
Definieren Sie den Stil der Eingabe type="file"

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage