在Web開發中，表單是必不可少的組件之一。為了讓表單更加美觀、用戶體驗更佳，我們經常需要使用一些表單插件。今天我們介紹一個純CSS3的多用途表單插件。

這個表單插件使用CSS3的偽類技術，不需要使用JavaScript。它具有多種類型的表單控件、響應式布局、易于自定義的樣式等特點。

/**
 * 簡單輸入框
 **/
.input-field {
position: relative;
width: 100%;
height: 2.5rem;
margin-bottom: 1rem;
background-color: #f1f1f1;
border-radius: 0.25rem;
}
.input-field input {
position: absolute;
top: 0.6rem;
left: 0.6rem;
width: calc(100% - 1.2rem);
height: calc(100% - 1.2rem);
font-size: 1rem;
color: #333;
background-color: transparent;
border: none;
outline: none;
}
.input-field input:focus {
box-shadow: inset 0 0 0 2px #0077ff;
}
/**
 * 單選框
 **/
.radio-field {
position: relative;
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
}
.radio-field input[type="radio"] {
position: absolute;
width: auto;
height: auto;
opacity: 0;
}
.radio-field label {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
background-color: #f1f1f1;
border-radius: 50%;
}
.radio-field label::before {
content: "";
position: absolute;
top: 0.1rem;
left: 0.1rem;
width: calc(100% - 0.2rem);
height: calc(100% - 0.2rem);
background-color: #fff;
border-radius: 50%;
}
.radio-field input[type="radio"]:checked + label::before {
background-color: #0077ff;
}
/**
 * 復選框
 **/
.checkbox-field {
position: relative;
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
}
.checkbox-field input[type="checkbox"] {
position: absolute;
width: auto;
height: auto;
opacity: 0;
}
.checkbox-field label {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
background-color: #f1f1f1;
border-radius: 0.25rem;
}
.checkbox-field label::before {
content: "";
position: absolute;
top: 0.1rem;
left: 0.1rem;
width: calc(100% - 0.2rem);
height: calc(100% - 0.2rem);
background-color: #fff;
border: 1px solid #ccc;
border-radius: 0.25rem;
}
.checkbox-field input[type="checkbox"]:checked + label::before {
background-color: #0077ff;
border-color: #0077ff;
}

通過上面的CSS代碼，我們可以創建簡單輸入框、單選框和復選框。同時，這個表單插件支持文本區域、下拉框等更多類型的表單控件，只需要根據需要自定義CSS樣式即可。

如果您需要更加便捷的使用這個表單插件，您可以在Github上查看完整代碼并下載：https://github.com/JianXin-Zhao/Pure-CSS3-Form-Elements