CSS 是前端開發中非常重要的一部分,其中鼠標點擊 input 也是常見的操作。在本文中,我們將詳細介紹如何使用 CSS 來美化鼠標點擊 input 的效果。
首先,在 HTML 中添加一個 input 標簽,然后使用 CSS 設置其樣式:
<input type="text" id="input"> #input { padding: 10px; border: 2px solid black; border-radius: 5px; }
上面的 CSS 代碼設置了 input 的內邊距(padding)、邊框粗細及類型(border)、邊框圓角(border-radius)等樣式。這是一個基本的 input 樣式。
接下來,我們使用 :focus 偽類來設置 input 點擊時的樣式:
#input:focus { outline: none; box-shadow: 0 0 5px blue; }
上面的 CSS 代碼設置了 input 當獲取焦點時,原先的邊框會被去掉(outline: none),并且添加了一個藍色的陰影(box-shadow)。
最后,我們使用 :hover 偽類來設置 input 鼠標懸停時的樣式:
#input:hover { border-color: red; }
上面的 CSS 代碼設置了 input 當鼠標懸停在其上時,邊框會變成紅色(border-color: red)。
以上就是使用 CSS 來美化鼠標點擊 input 的效果,相信對前端開發者們會有所幫助。
上一篇css鏈接其他css文件
下一篇css鏈接中