Heim > Artikel > Web-Frontend > So unterscheiden Sie mithilfe von CSS-Styles_Experience-Austausch, ob es sich bei einer Eingabe um eine Schaltfläche oder ein Textfeld handelt
So unterscheiden Sie mithilfe von CSS-Styles_Experience-Austausch, ob es sich bei einer Eingabe um eine Schaltfläche oder ein Textfeld handelt
- PHP中文网Original
- 2016-05-16 12:04:551828Durchsuche
Technische Untersuchung, wie beim Festlegen von Stilen unterschieden werden kann, ob eine Eingabe eine Schaltfläche oder ein Textfeld ist – entfernen Sie den Inhalt in der Eingabe
Wenn Sie das HTML-Tag sehen, werden Sie Folgendes sehen: Was fällt mir ein? Ein Textfeld? Ein Knopf? Ein Optionsfeld? Ein Kontrollkästchen? ...Ja, ja, ja, es geht ihnen gut. Vielleicht haben Sie nicht gedacht, dass diese kleine Eingabe tatsächlich 10 verschiedene Dinge erzeugen kann. Hier ist eine Liste, an die Sie nicht gedacht haben:
Passwortfeld
Schaltfläche „Senden“
Eingabetyp = „Radio“ /> Optionsfeld
Verstecktes Feld
Eingabe ist wirklich eine großartige Sache und so „provokativ“, aber wenn Sie tatsächlich versuchen, unterschiedliche Stile für verschiedene Steuerelemente im Projekt festzulegen, werden Sie feststellen, dass Eingabe Ihnen wirklich „den Kopf umhauen“ kann. Ich weiß nicht, warum Eingaben überhaupt so viele Identitäten zugewiesen wurden, aber ihre „N-fachen Identitäten“ bereiteten Website-Designern große Probleme. Glücklicherweise sind die Werktätigen großartig und es gibt immer noch Möglichkeiten, das Problem zu lösen ~, obwohl sie alle ihre eigenen fatalen Mängel haben Orz ... Die Befreiungsmethoden sind grob zusammengefasst und die Liste lautet wie folgt (ich bin nicht sehr talentiert). , daher sind Fehler und Auslassungen unvermeidlich, daher möchte ich alle Experten um Rat fragen:
1. Verwenden Sie den CSS-Ausdruck, um den Ausdruck zu bestimmen
2 . Verwenden Sie Javascript-Skript zum Implementieren von
4. Wenn Sie Microsoft Visual Studio für Entwicklungsprojekte im Jahr 2005 oder spätere Versionen verwenden, können Sie auch Skin verwenden.
Im Folgenden wird die detaillierte Implementierung jeder Methode sowie ihre Vor- und Nachteile erläutert.
1: Verwenden Sie den CSS-Ausdruck, um den Ausdruck zu beurteilen
Implementierungscode-Referenz:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<Kopf>
<Titel> diffInput2 title>
<meta Name="Autor" Inhalt="JustinYoung"/>
<Meta Name="Schlüsselwörter" Inhalt="" />
<meta name="Beschreibung" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<Stil Typ="text/css" >
Eingabe
{
Hintergrundfarbe: expression(this.type=="text"?'#FFC':'');
}
Stil>
Kopf >
<Körper>
<dl>
<dt>Dies ist ein normales Textfeld:<dd><Eingabe Typ="Text" Name="">
<dt> <dd><Eingabe Typ="Schaltfläche"Wert ="ich bin button">
dl>
Körper>
html>
Nachteile: Der Ausdruck Urteilsausdruck wird von FireFox nicht unterstützt. Das Fatale daran ist, dass nur eines unterschieden werden kann (im Beispiel kann beispielsweise nur das Textfeld unterschieden werden). Versuchen Sie nicht, mehrere festzulegen. Das Folgende überschreibt das obige Orz ...
2: Typauswahl im CSS verwenden
Implementierungsreferenzcode:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<Kopf>
<Titel> diffInput2 title>
<meta Name="Autor" Inhalt="JustinYoung"/>
<Meta Name="Schlüsselwörter" Inhalt="" />
<meta name="Beschreibung" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<Stil Typ="Text /css">
input[type="text"]
{
Hintergrundfarbe :#FFC;
}
input[type="password"]
{
Hintergrundbild:url(BG.gif);
}
input[type="submit"]
{
Hintergrundfarbe:blau;
Farbe :weiß;
}
Eingabe [type="reset"]
{
Hintergrundfarbe:navy;
Farbe:weiß;
}
input[type="radio"]
{
/* In FF wurden einige Radiostile, wie etwa die Hintergrundfarbe, nicht unterstützt >;
} input[type="checkbox"] {
/*
In FF wurden einige Kontrollkästchen-Stile wie „Hintergrundfarbe“ nicht unterstützt
*/ Marge
:10px;
} input[type="button"] {
Hintergrundfarbe:
hellblau
;
} Stil
> ;head>
<body>
<dl>
<dt>Ini kotak teks biasa:<dd><input taip="text" nama="">
<dt>Ini kotak teks kata laluan: <dd><masukan taip="kata laluan" nama="">
<dt >Ini butang serahkan :<dd><input taip="submit">
<dt >Ini butang semula :<dd><masukan taip="reset">
<dt >Ini ialah radio:<dd><input taip="radio" nama="ground1"> <input taip="radio" nama="ground1" >
<dt>Ini kotak pilihan: <dd><masukan taip="kotak semak" nama ="ground2"> <input taip 🎜>="kotak semak" nama="ground2">
<dt>Ini ialah butang biasa:<dd><input taip="button" nilai="i' butang m">
dl>
badan>
html>
Kelebihan: Mudah, jelas dan boleh dibahagikan kepada pelbagai bentuk kawalan input.
Kelemahan: pemilih taip, penyemak imbas sebelum IE6 yang tidak menyokong piawaian web dengan baik tidak dapat menyokongnya (orz maut...)
3: Gunakan skrip javascript untuk melaksanakan
Kod rujukan pelaksanaan:
Kod html bahagian hadapan:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<kepala>
<tajuk> diffInput tajuk>
<meta nama="Pengarang" kandungan="JustinYoung">
<meta nama="Kata kunci" kandungan="">
<meta nama="Penerangan" kandungan="">
<meta http-equiv="Content-Type" kandungan="text/html; charset=utf-8" >
<gaya taip="text/css">
input{tingkah laku:url('css.htc ');}
gaya>
kepala>
<badan>
<dl>
<dt>Ini kotak teks biasa:<dd><input taip="text" nama="">
<dt>Ini kotak teks kata laluan: <dd><masukan taip="kata laluan" nama="">
<dt >Ini butang serahkan :<dd><input taip="submit">
<dt >Ini butang semula :<dd><masukan taip="reset">
<dt >Ini ialah radio:<dd><input taip="radio" nama="ground1"> <input taip="radio" nama="ground1" >
<dt>Ini kotak pilihan: <dd><masukan taip="kotak semak" nama ="ground2"> <input taip 🎜>="kotak semak" nama="ground2">
<dt>Ini butang biasa:<dd><input taip="button" nilai="i' butang m ">
dl>
badan>
html>
Css.htc代码：
<skrip bahasa=javascript>
suis(taip)
{
kes 'teks':
style.backgroundColor= "merah";
rehat;
kes 'kata laluan':
style.backgroundImage="url(BG.gif) ";
pecah;
kes 'serahkan':
style.backgroundColor="biru";
gaya. warna="putih";
pecah;
kes 'reset':
style.backgroundColor=""" 🎜>tentera laut"
; gaya.warna="putih "
; pecah
; kes
'radio': style.backgroundColor="hotpink"
;pause;
case 'checkbox':
style.backgroundColor= "vert";
pause;
case 'bouton':
style.backgroundColor="bleu clair";
pause;
par défaut:; //d'autres utilisent le style par défaut.
}
script>
Avantages : Vous pouvez partitionner chaque formulaire de contrôle de saisie. L'utilisation mixte de plusieurs technologies satisfait la vanité du « je suis un maître ».
Inconvénients : La technologie implique beaucoup d'enseignement, car elle utilise js pour le post-traitement, donc avant que le js ne prenne effet, chaque entrée est toujours dans son état d'origine, puis tout d'un coup "devient belle", ce qui rendra votre page très étrange. Le plus fatal est que FireFox ne prend pas en charge Orz...
4 : Utiliser le skin dans Microsoft Visual Studio 2005.
Code de référence du fichier skin :
<%--Style pour TextBox commune--%>
<asp:TextBox runat="serveur" style ="couleur de fond :#FFC ">asp:TextBox >
<asp : Bouton exécuté="serveur" style=" fond-couleur : rouge">asp:Bouton>
Perhatikan bahawa gaya di dalam ditambah menggunakan gaya dan bukannya cssClass Sebabnya sangat mudah Jika anda menggunakan cssClass, cssClass sebelumnya akan menulis ganti cssClass ini. mengakibatkan kegagalan. Sudah tentu, kulit tidak boleh digunakan bersendirian dan mesti digunakan bersama dengan helaian gaya css.
Kelebihan: Anda boleh membahagikan setiap borang kawalan (nota: kulit hanya boleh digunakan untuk kawalan sebelah pelayan, jadi ia bukan lagi teg input mudah, walaupun kawalan sebelah pelayan ini masih apabila "dipukul" di meja depan) kawalan input). Selain css, ia dipisahkan oleh lapisan lain, menjadikan tetapan gaya lebih disesuaikan. Kelebihan lain (rujuk kelebihan kulit).
Kelemahan: Hanya boleh digunakan dengan kawalan sebelah pelayan. Tidak semua projek boleh menggunakan fungsi kulit Orz...
Ringkasan: Kaedah di atas semuanya mempunyai kelebihan dan kekurangan masing-masing , menggunakan salah satu sahaja tidak dapat menyelesaikan masalah dengan baik. Oleh itu, pelbagai kaedah harus digunakan bersama untuk menyelesaikan masalah dengan lebih baik. Tetapi adakah pelbagai kaedah sempurna jika digunakan bersama? TIDAK~! Ia juga mempunyai kelemahan yang membawa maut - penyelenggaraan berbilang penyelesaian memerlukan kos yang lebih besar!
Posskrip: Ini adalah era yang bermasalah, diterajui oleh IE6, apabila pelayar bukan standard web menyapu dunia saya tidak tahu berapa ramai pemula halaman web mati secara tragis dalam IE6 analisis Pelik Di bawah model ini, berapa ramai pengaturcara yang diperhambakan oleh IE6, dan banyak pereka web yang tinggal di bawah kelangkang IE6. Walaupun dalam kegelapan, kami gembira melihat kemunculan orang FireFox yang berani yang menentang kezaliman, dan permulaan sokongan IE7 yang semakin baik untuk standard Web. Tetapi malam itu masih akan berlangsung lama. Kami gembira dan sedih tentang era apabila standard web menguasai dunia. Berita baiknya ialah pada masa itu, reka bentuk dan perancangan web kami akan menjadi semudah makan. Namun, demi kemajuan masyarakat manusia, teknologi untuk menyelamatkan bumi, dan budaya teknologi membangunkan alam semesta -_-b... Saya masih menantikan kedatangan standard web yang akan menguasai dunia.
kata kunci: Secara automatik membezakan antara pelbagai gaya input Cara membezakan antara