css設(shè)置input的樣式 修改input輸入框樣式和點(diǎn)擊時(shí)邊框的改變?
修改input輸入框樣式和點(diǎn)擊時(shí)邊框的改變?關(guān)于輸入框,瀏覽器將有自己的風(fēng)格。如何修改輸入框樣式并點(diǎn)擊樣式如下。1. HTML編寫時(shí),有一個(gè)輸入文本框和一個(gè)input type=button。2. 輸
修改input輸入框樣式和點(diǎn)擊時(shí)邊框的改變?
關(guān)于輸入框,瀏覽器將有自己的風(fēng)格。如何修改輸入框樣式并點(diǎn)擊樣式如下。
1. HTML編寫時(shí),有一個(gè)輸入文本框和一個(gè)input type=button。
2. 輸入基本樣式書寫,占位符樣式也可以修改,主要是去掉原來的輸入樣式,添加自己的樣式。
3. 單擊時(shí),輸入框的樣式將更改。單擊時(shí)可以添加動(dòng)畫。單擊輸入框時(shí)會(huì)出現(xiàn)陰影和顏色。
涉及的知識(shí)點(diǎn):
1修改占位符的樣式,文本縮進(jìn)控制文本距離
2修改輸入邊框的樣式,刪除原來的樣式
3單擊時(shí)更改邊框顏色和陰影,框陰影中的發(fā)光樣式看起來更漂亮
單擊時(shí)將添加4個(gè)動(dòng)畫
您可以使用CSS3中的新選擇器“[attribute=value]”同時(shí)選擇指定屬性的標(biāo)簽。
1. 新建一個(gè)HTML文檔,添加5個(gè)輸入標(biāo)記,其中第一個(gè)和最后一個(gè)“type”屬性的屬性值為“text”:
2。在head標(biāo)簽和body標(biāo)簽之間添加一個(gè)style標(biāo)簽,并添加代碼“input[type=text]”,“input”表示標(biāo)簽名,“type”表示屬性名,“text”表示屬性值,將所有屬性命名為“t”3。將所選標(biāo)簽的背景色設(shè)置為紅色,然后屬性值為“文本”的第一個(gè)和最后一個(gè)標(biāo)簽的背景色變?yōu)榧t色