CSS是實現美觀樣式的關鍵,其中控制input選中樣式是很重要的一環。實現input選中樣式的方法有以下幾種:
/*第一種方法:使用 :hover 偽類*/ input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover{ border-color:#AAA; } /*第二種方法:使用 :focus 偽類*/ input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus{ border-color:#4d90fe; box-shadow:0 0 0 2px rgba(68, 138, 255, 0.3); } /*第三種方法:自定義input選中樣式*/ input[type="text"].custom-select:focus, input[type="password"].custom-select:focus, input[type="email"].custom-select:focus{ border-color:#4d90fe; box-shadow:0 0 0 2px rgba(68, 138, 255, 0.3); } /*第四種方法:使用CSS3的:checked選擇器*/ input[type="radio"]:checked + label, input[type="checkbox"]:checked + label { color: #f00; }
使用以上方法任意一種可以實現input選中樣式的控制,開發者可以根據不同情況選擇合適的方法。以上代碼中的樣式均為示例,開發者可以根據自身需求進行修改。
下一篇css控制前景和后景