【CSS】关于表单样式
【CSS】關于表單樣式
- 關于表單樣式
- 一、文本框樣式
- 二、選框樣式
- 三、按鈕樣式
- 四、下拉框樣式
關于表單樣式
【注意】:以下樣式只在Chrome瀏覽器下設置成功,其它瀏覽器可能有所差異,需要單獨設置、自行調整
一、文本框樣式
-
正常情況下,普通文本框的樣式如下(未聚焦和聚焦狀態)
-
首先,文本框的樣式大部分都可以通過我們已知的CSS屬性進行修改
input[type=text] {/* 通過width/height設置寬高 */width: 100px;height: 30px;/* 設置字體樣式 */font-size: 18px;font-weight: bold;/* 設置內邊距 */padding: 0 5px; } -
然后,最重要的應該是邊框樣式的設置,也是我們非常熟悉的border屬性
PS:以下樣式的設置是在上面樣式設置的基礎上進行的
input[type=text] {/* 通過border設置邊框樣式 */border:5px solid red;border-radius: 8px; }【注意】:如果不設置邊框樣式,就會出現下面圖片中第一種情況,即左上部分的顏色要暗一點
-
其次,當聚焦時,文本框周圍會有一圈輪廓,我們可以通過outline屬性來控制
input[type=text] {/* 通過outline設置輪廓 */outline-style: dashed;outline-offset: 5px;outline-color: dodgerblue;outline-width: 5px;/* outline: none; */ }解析:
outline-offset:即輪廓對文本框的偏移量,可以為負數,負數即顯示在文本框內部
outline-color:輪廓顏色
outline-width:輪廓寬度
outline-style:輪廓樣式
【注意】:如果設置了輪廓樣式,則輪廓會常顯;不設置樣式,則默認在聚焦時才顯示,默認樣式為直線,輪廓無法圓角
一般情況,設置outline:none即可 (隱藏輪廓)
-
接下來,通過:focus偽類,來控制文本框聚焦時的樣式
input[type=text]:focus {/* 聚焦時樣式 */box-shadow: 0px 0px 12px -1px #b1c1c3; }添加聚焦時的樣式,如陰影,輪廓樣式等等
-
還可以通過:placeholder偽類來控制提示信息的樣式
input[type=text]::placeholder {/* 提示信息樣式 */font-size: 14px;color: rgba(136, 127, 127, 0.774); }
二、選框樣式
結合<label>標簽,為綁定的選框設置樣式
-
前提條件:標簽的for屬性要與選框的id屬性相同,即進行了綁定
-
實現思路:
- 隱藏選框,再為<label>標簽添加::before偽類或者::after偽類
- 通過這個偽類設置新的樣式
- 結合選框的:checked偽類屬性,設置選中狀態時的樣式
-
實現過程:(以單選框為例)
-
隱藏單選框
input[type="radio"] {/* 直接設置大小為0 */width: 0;height: 0; } -
添加偽類
label::before {content: "";display: inline-block;/* 用vertical-align來對齊文本 */vertical-align: middle;width: 20px;height: 20px;margin-right: 10px;border-radius: 50%;border: 5px solid darkgreen; }
-
-
選中狀態
input[type="radio"]:checked+label::before {background-color: lightgreen;padding: 0px; } -
或者直接給<label>標簽設置樣式,再結合:checked偽類屬性,設置選中樣式
三、按鈕樣式
-
先設置基本樣式,用常用的屬性就可以設置
input[type=button], input[type=submit], input[type=reset] {width: 80px;height: 30px;color: white;background-color: #5bb85d;font-size: 18px;font-weight: bold; } -
主要是邊框樣式,和文本框樣式的邊框設置一樣,使用border屬性,更改默認的邊框樣式,使用outline屬性,更改默認輪廓樣式
input[type=button], input[type=submit], input[type=reset] {/* border+outline */border-radius: 3px;border: none;outline: none; }
其它的還可以通過偽類屬性,設置點擊時的樣式:active,聚焦時的樣式:focus,等等
四、下拉框樣式
-
基本樣式還是可以用已知的屬性來設置,對于邊框仍然采用border+outline屬性來設置
select {width: 150px;height: 30px;color: #444;font-size: 16px;font-weight: bold;/* border+outline */border-radius: 3px;border: 3px solid skyblue;outline: none; } -
通過text-align-last屬性,來控制下拉框里的文字居中,通過appearance屬性,隱藏下拉箭頭
select {/* 文字間距 */letter-spacing: 2px;/* 文字居中 */text-align-last: center;appearance: none;/* 背景顏色 */background-color: #fff;background: linear-gradient(white, #e5e5e5); } -
對于option元素,只能設置一般的字體文本樣式
option {font-size: 14px;font-weight: bold;color: red;background-color: #adff2f; }只有字體文本樣式才會生效
無法設置位置樣式、懸浮樣式
背景顏色無法透明,透明時默認白色
因此,要更改option的樣式,只能通過其它元素模擬來實現下拉框
-
其它的,在行內設置樣式size屬性和multiple屬性
<select size=2>...</select>表示顯示兩個選項出來
這時下拉框里的內容被option里的內容填充,顯示數量為兩個選項,且此時通過滾動來切換顯示
select{/* 取消高度 *//* height:30px *//* 文本垂直方向居中對齊 */vertical-align: middle; } <select multiple>...</select>可以搭配size屬性,設置具體的顯示數量
鄙人拙見,不足之處,萬望海涵!
總結
以上是生活随笔為你收集整理的【CSS】关于表单样式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 算法——排序——插入排序图解动画
- 下一篇: 用CSS3制作50个超棒动画效果教程