Rumah >hujung hadapan web >tutorial css >Bagaimana untuk membezakan sama ada input ialah butang atau kotak teks menggunakan gaya CSS_Pertukaran pengalaman
Bagaimana untuk membezakan sama ada input ialah butang atau kotak teks menggunakan gaya CSS_Pertukaran pengalaman
- PHP中文网asal
- 2016-05-16 12:04:551849semak imbas
Penyiasatan teknikal tentang cara membezakan sama ada input ialah butang atau kotak teks semasa menetapkan gaya - keluarkan kandungan dalam input
Apabila anda melihat tag html , anda akan Apa terlintas di fikiran? Kotak teks? Butang? Butang radio? Kotak semak? ... Ya, ya, ya, mereka baik-baik saja. Mungkin anda mungkin tidak menyangka bahawa input kecil ini sebenarnya boleh mencipta 10 perkara yang berbeza Berikut ialah senarai untuk melihat mana yang anda tidak fikirkan:
kotak kata laluan
input type="radio" /> Radio button
kotak semak
="file" /> Kawalan pemilihan fail
Hidden box
input adalah benar-benar satu perkara yang hebat, dan ia sangat "provokatif", tetapi apabila anda benar-benar cuba untuk menetapkan gaya yang berbeza untuk kawalan yang berbeza dalam projek, anda akan mendapati bahawa input benar-benar boleh "Meletupkan kepala anda". Saya tidak tahu mengapa input diberikan begitu banyak identiti pada mulanya, tetapi "identiti N-lipat"nya memang membawa banyak masalah kepada pereka laman web. Nasib baik, orang yang bekerja adalah hebat, dan masih ada cara untuk menyelesaikan masalah itu~, walaupun mereka semua mempunyai kekurangan mereka sendiri Orz... Kaedah pembebasan diringkaskan secara kasar, dan senarainya adalah seperti berikut (Saya tidak begitu berbakat , jadi kesilapan dan ketinggalan tidak dapat dielakkan, jadi saya ingin bertanya kepada semua pakar Bimbingan):
1 Gunakan ungkapan css untuk menentukan ungkapan
2 Gunakan pemilih jenis dalam css
3 . Gunakan skrip javascript untuk melaksanakan
4 Jika anda menggunakan Microsoft Visual Studio Untuk projek pembangunan pada tahun 2005 atau versi seterusnya, tahniah, anda juga boleh menggunakan skin.
Berikut akan menerangkan pelaksanaan terperinci setiap kaedah serta kelebihan dan kekurangannya.
1: Gunakan ungkapan css untuk menilai ungkapan
Rujukan kod pelaksanaan:
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> diffInput2 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
{
warna latar belakang:: ekspresi(this.type=="text"?'#FFC':'');
}
gaya>
kepala >
<badan>
<dl>
<dt>Ini ialah kotak teks biasa:<dd><masukan taip="teks" nama="">
<dt> < 🎜>dd><input taip="button" nilai ="i'm button">
dl>
badan>
html>
Kelemahan: Ungkapan penghakiman FireFox tidak menyokong. Perkara yang membawa maut ialah hanya satu yang boleh dibezakan (contohnya, dalam contoh, hanya kotak teks teks boleh dibezakan), jangan cuba untuk menetapkan berbilang, yang berikut akan menimpa Orz di atas...
2: Gunakan pemilih Jenis dalam css
kod rujukan pelaksanaan:
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> diffInput2 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[type="text"]
{
warna latar belakang :#FFC;
}
input[type="password"]
{
imej latar belakang:url(BG.gif);
}
input[type="submit"]
{
warna latar belakang:biru;
warna :putih;
}
masukan [type="reset"]
{
warna latar belakang:tentera laut;
warna:putih;
}
input[type="radio"]
{
/* Dalam FF, Beberapa gaya radio seperti warna latar belum disokong*/
margin:10px;
}
input[type="checkbox"]
{
/*Dalam FF, Beberapa gaya kotak pilihan seperti warna latar belum disokong*/
margin:10px;
}
input[type="button"]
{
warna latar belakang:biru muda;
}
gaya> ;
head>
<body>
<dl>
<dt>이것은 일반적인 텍스트 상자입니다:<dd><입력 유형="text" 이름="">
<dt>이것은 비밀번호 텍스트 상자입니다. <dd><입력 입력="비밀번호" 이름="">
<dt >제출 버튼은 다음과 같습니다.<dd><입력 입력="제출">
<dt >재설정 버튼입니다:<dd><입력유형="재설정">
<dt >이것은 라디오입니다:<dd><입력 유형="라디오" 이름="ground1"> <입력 유형="radio" 이름="ground1" >
<dt>체크박스는 다음과 같습니다. <dd><입력 유형="checkbox" 이름 ="ground2"> <입력입력="checkbox" 이름="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>이것은 일반적인 텍스트 상자입니다:<dd><입력 유형="text" 이름="">
<dt>이것은 비밀번호 텍스트 상자입니다. <dd><입력 입력="비밀번호" 이름="">
<dt >제출 버튼은 다음과 같습니다.<dd><입력 입력="제출">
<dt >재설정 버튼입니다:<dd><입력유형="재설정">
<dt >이것은 라디오입니다:<dd><입력 유형="라디오" 이름="ground1"> <입력 유형="radio" 이름="ground1" >
<dt>체크박스는 다음과 같습니다. <dd><입력 유형="checkbox" 이름 ="ground2"> <입력입력="checkbox" 이름="ground2">
<dt>일반적인 버튼입니다:<dd><입력 유형="버튼" 값="i' m 버튼">
dl>
본체>
html>
Css.htc代码:
<스크립트 언어=javascript>
스위치(유형)
{
case 'text':
style.BackgroundColor= "빨간색";
휴식;
케이스 '비밀번호':
style.BackgroundImage="url(BG.gif) ";
휴식;
케이스 '제출':
style.BackgroundColor="파란색";
스타일. 색상="흰색";
휴식;
케이스 '재설정':
style.BackgroundColor="네이비";
style.color="화이트 ";
break;
케이스 '라디오':
style.BackgroundColor="핫핑크";
pecah;
kes 'kotak semak':
style.backgroundColor= "hijau";
rehat;
sarung 'butang':
gaya.warna latar belakang="biru muda";
pecah;
lalai:; //yang lain menggunakan gaya lalai.
}
skrip>
Kelebihan: Anda boleh membahagikan setiap borang kawalan input. Penggunaan bercampur pelbagai teknologi memenuhi kesombongan "Saya seorang tuan".
Kelemahan: Teknologi ini melibatkan banyak pengajaran, kerana ia menggunakan js untuk pemprosesan pasca, jadi sebelum js tidak berkesan, setiap input masih dalam keadaan asal, dan kemudian tiba-tiba "menjadi kacak" akan menjadikan anda halaman sangat pelik. Perkara yang lebih maut ialah FireFox tidak menyokong Orz...
4: Gunakan kulit dalam Microsoft Visual Studio 2005.
Kod rujukan fail kulit:
<%--Gaya untuk TextBox biasa--%>
<asp:TextBox runat="pelayan" gaya ="warna latar belakang:#FFC ">asp:TextBox >
<asp:Button runat="pelayan" gaya=" latar belakang-warna: merah">asp:Butang>
참고로 내부 스타일은 cssClass 대신 style을 사용하여 추가됩니다. 이유는 매우 간단합니다. cssClass를 사용하면 이전 cssClass가 이 cssClass를 덮어쓰게 됩니다. 결과적으로 실패합니다. 물론 스킨은 단독으로 사용할 수 없으며 반드시 CSS 스타일 시트와 함께 사용해야 합니다.
장점: 각 컨트롤 양식을 분할할 수 있습니다(참고: 스킨은 서버 측 컨트롤에만 사용할 수 있으므로 더 이상 단순한 입력 태그가 아닙니다. 단, 이러한 서버 측 컨트롤은 "적중"될 때에도 여전히 유지됩니다) 프론트 데스크에서) 입력 제어). CSS 외에도 다른 레이어로 분리되어 있어 스타일 설정을 더 쉽게 맞춤 설정할 수 있습니다. 기타 장점(스킨의 장점 참조)
단점: 서버측 컨트롤에만 사용할 수 있습니다. 모든 프로젝트에서 스킨 기능을 사용할 수 있는 것은 아닙니다. Orz...
요약: 위의 방법에는 모두 장단점이 있습니다. , 둘 중 하나만 사용하면 문제를 잘 해결할 수 없습니다. 따라서 문제를 더 잘 해결하려면 여러 가지 방법을 함께 사용해야 합니다. 하지만 여러 가지 방법을 함께 사용하면 완벽할까요? 안돼~! 또한 치명적인 단점도 있습니다. 여러 솔루션을 유지 관리하려면 더 많은 비용이 필요합니다!
후기: 웹 표준이 아닌 브라우저가 전 세계를 휩쓸던 IE6가 이끄는 혼란스러운 시대입니다. 웹 페이지 초보자가 얼마나 많은지 모르겠습니다. IE6에서 비극적으로 사망 이상한 분석 모드에서 얼마나 많은 프로그래머가 IE6의 노예가되고 수많은 웹 디자이너가 IE6의 가랑이 아래에서 굴욕 속에 살고 있습니까? 어둠 속에서도 우리는 폭정에 반대하는 FireFox의 용감한 사람들의 출현과 웹 표준에 대한 IE7의 점점 더 나은 지원이 시작되는 것을 보게 되어 기쁩니다. 그러나 밤은 여전히 오랫동안 지속될 것입니다. 웹 표준이 세상을 지배하는 시대에 우리는 기쁘기도 하고 슬프기도 합니다. 좋은 소식은 그때쯤이면 우리의 웹 디자인과 기획이 식사만큼 쉬워질 것이라는 점이다. 슬픈 것은 정말로 그 때가 오면 우리 밥그릇이 여전히 그렇게 무거울 것인가? 하지만 인류사회의 발전을 위해, 지구를 살리는 기술, 우주를 발전시키는 기술문화 -_-b... 아직도 세계를 지배할 웹표준의 도래를 기대하고 있습니다.
키워드: 다양한 입력 스타일을 자동으로 구분합니다. CSS 버튼에서 <입력 유형=텍스트>를 구별하는 방법입니다. ;, 자바스크립트를 이용하여 다양한 입력 스타일, 입력, 입력 유형, 입력 유형 파일, 입력 유형 숨김, 입력 파일, input.dll, html 입력, 입력 유형 이미지를 자동으로 구분