修改input輸入框樣式和點(diǎn)擊時(shí)邊框的改變？關(guān)于輸入框，瀏覽器將有自己的風(fēng)格。如何修改輸入框樣式并點(diǎn)擊樣式如下。1. HTML編寫(xiě)時(shí)，有一個(gè)輸入文本框和一個(gè)input type=button。2. 輸

修改input輸入框樣式和點(diǎn)擊時(shí)邊框的改變？

關(guān)于輸入框，瀏覽器將有自己的風(fēng)格。如何修改輸入框樣式并點(diǎn)擊樣式如下。

1. HTML編寫(xiě)時(shí)，有一個(gè)輸入文本框和一個(gè)input type=button。

2. 輸入基本樣式書(shū)寫(xiě)，占位符樣式也可以修改，主要是去掉原來(lái)的輸入樣式，添加自己的樣式。

3. 單擊時(shí)，輸入框的樣式將更改。單擊時(shí)可以添加動(dòng)畫(huà)。單擊輸入框時(shí)會(huì)出現(xiàn)陰影和顏色。

涉及的知識(shí)點(diǎn)：

1修改占位符的樣式，文本縮進(jìn)控制文本距離

2修改輸入邊框的樣式，刪除原來(lái)的樣式

3單擊時(shí)更改邊框顏色和陰影，盒子陰影內(nèi)部發(fā)光樣式看起來(lái)更好

點(diǎn)擊時(shí)會(huì)添加4個(gè)動(dòng)畫(huà)

試試這個(gè)？

input框樣式如何改變？

直接在頁(yè)面上重新定義CSS，或編寫(xiě)CSS樣式文件以在元素之后引入頁(yè)面。例如，如果我不喜歡它的圓角，直接定義一個(gè)CSS來(lái)刪除圓角。El input內(nèi)部，.El-checkbox內(nèi)部，.El-textarea輸入，。El button{border radius:0}

下面是我的個(gè)人CSS。El-input uuuuuuuuuuuuuuuuuuu內(nèi)部{高度：33px字體大?。?3px方框陰影：無(wú)邊框：1px實(shí)心#e9e9e9}.El-input uuu內(nèi)部：懸停{邊框顏色：#e9e9e9}.el-input#內(nèi)部：焦點(diǎn){邊框顏色：#42a5f5方框陰影：無(wú)過(guò)渡持續(xù)時(shí)間：.5s}.el-input uuuuuuuuuuinner:：-webkit輸入占位符{行高：20px}.el-input uuuuuuuuuuuinner.el-checkbox inner，.el-textarea inner，.el按鈕{邊框半徑：0}