CSS 表单
フォームの例として、CSSを使用してHTMLのフォーム要素をレンダリングします。
CSS 实例
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4C7EAF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #4777A6;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
尝试一下 »
入力ボックス(input)スタイル
width 属性を使用して入力フィールドの幅を設定します。
上記の例では、すべての <input> 要素の幅を 100% に設定しています。特定のタイプの入力フィールドのみを設定したい場合は、以下の属性セレクターを使用できます：
input[type=text]- テキスト入力ボックスを選択するinput[type=password]- パスワードの入力フィールドを選択input[type=number]- 数字の入力フィールドを選択- ...
输入框填充
使用padding属性を使用すると、入力フィールドに内側の余白（パディング）を追加できます。
CSS 实例
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
尝试一下 »
設定していることに注意してくださいbox-sizing属性はborder-boxこれにより、ブラウザは指定された幅と高さの入力フィールドを、ボーダーとパディングを含めて描画することができます。
詳細は〜で読むことができますCSS3 框大小 。
入力ボックス(input)のボーダー（枠線）
使用border属性を使用すると、input のボーダーのサイズや色を変更できます。使用border-radius属性を使用すると、input に角丸を追加できます。
CSS 实例
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
尝试一下 »
下部のボーダーだけを追加したい場合は、〜を使用できますborder-bottom属性:
CSS 实例
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
尝试一下 »
入力ボックス(input)の色
可以使用background-color属性を使用して入力フィールドの背景色を設定し、color属性はテキストの色を変更するために使用します：
CSS 实例
input[type=text] {
background-color: #3C7CBC;
color: white;
}
尝试一下 »
入力ボックス(input)のフォーカス
デフォルトでは、一部のブラウザでは入力フィールドがフォーカスを取得したとき（入力フィールドをクリックしたとき）に青いアウトラインが表示されます。 input のスタイルを次のように設定できます。outline: none;この効果を無効にするには
使用:focusセレクタを使用すると、入力フィールドがフォーカスを取得したときのスタイルを設定できます。
CSS 实例
input[type=text]:focus {
background-color: lightblue;
}
尝试一下 »
CSS 实例
input[type=text]:focus {
border: 3px solid #555;
}
尝试一下 »
入力ボックス(input)のアイコン
入力フィールドにアイコンを追加したい場合は、次を使用できます。background-imageプロパティと位置指定用のbackground-position属性を使用します。アイコンに余裕を持たせるため、アイコンの左マージンを設定することに注意してください。
CSS 实例
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
尝试一下 »
アニメーション付きの検索ボックス
以下の例ではCSSを使用していますtransition属性は、入力フィールドがフォーカスを取得したときに右に伸びるように設定します。次の方法で確認できます。CSS 动画章で詳細を参照してください
CSS 实例
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
尝试一下 »
テキストボックス（textarea）スタイル
注意:使用resize属性を使用すると、テキストボックスのサイズ変更機能を無効にできます（通常、右下隅をドラッグしてサイズを変更できます）。
CSS 实例
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
尝试一下 »
ドロップダウンメニュー（select）スタイル
CSS 实例
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
尝试一下 »
按钮样式
CSS 实例
input[type=button], input[type=submit], input[type=reset] {
background-color: #4C7EAF;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
尝试一下 »
詳細については、私たちの〜を参照してくださいCSS 按钮教程。
响应式表单
レスポンシブフォームは、ブラウザウィンドウのサイズに応じて各要素を再配置できます。ブラウザウィンドウのサイズを変更して効果を確認できます。
高级:以下の例では〜を使用していますCSS3 多媒体查询レスポンシブフォームを作成します。
CSS 实例
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4C7EAF;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #4777A6;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
尝试一下 »
其他扩展