Mafaa ya Form cha CSS
通过使用 CSS，可以极大地改善 HTML 表单的外观：
设置输入字段的样式
kutumia width 属性来确定输入字段的宽度：
mifano
input {
width: 100%;
}
上例适用于所有 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器：
input[type=text]- 将仅选择文本字段input[type=password]- 将仅选择密码字段input[type=number]- 将仅选择数字字段- 等等...
填充输入框
kutumia padding 属性在文本字段内添加空间。
Tahadhari:若有很多输入，那么您可能还需要添加外边距，以便在它们之外添加更多空间：
mifano
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
请注意，我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。
请在在我们的 CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。
带边框的输入框
请使用 border 属性更改边框的粗细和颜色，并使用 border-radius 属性添加圆角：
mifano
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
如果仅需要下边框，请使用 border-bottom 属性：
mifano
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
彩色的输入框
请使用 background-color 属性为输入添加背景色，并使用 color 属性更改文本颜色：
mifano
input[type=text] {
background-color: #3CBC8D;
color: white;
}
获得焦点的输入框
默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。您可以通过向输入添加 outline: none; kumichukua hii hatua.
kutumia :focus Vilivyo kufikiria kuweka muangavu kwa ujumbe wa kufikiria kwa sababu ya kufikiria kwa sababu ya kufikiria:
mifano ya 1
input[type=text]:focus {
background-color: lightblue;
}
Tafuta kwa ingia ya andiko laandikwa:
mifano ya 2
input[type=text]:focus {
border: 3px solid #555;
}
Tafuta kwa ingia ya andiko laandikwa:
ingia ya kufaa ya taswira
kama unaingia kwa taswira kwenye ingia, tumeongeza kawaida ya kawaida: background-image inaufikia kwa kawaida ya kawaida kwa kawaida. background-position inaufikia kwa kawaida ya kawaida kwa kawaida. Kwa hivyo, tumeongeza msaada wa kushoto kikubwa (padding-left) ili kuhakikisha ukuru wa taswira:
mifano
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
ingia ya kufaa ya kufaa ya kufaa
ingia ya kufaa ya kufaa ya kufaa ya kufaa transition inaufikia kwa CSS CSS Muaguzi inayotumiwa kwenye kitabu hiki unaweza kuelewa zaidi kuhusu transition taaluma ya kawaida ya kawaida.
mifano
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
kufaa ya kufungua kwa eneo laandikwa
Tahadhari:kutumia resize kawaida kinakuhatarisha kufungua ukubwa wa textareas (kinakubadilika kwa kifungo cha kidakika cha kushoto cha kushoto):
mifano
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
kufaa ya kufungua kwa chaguo cha chaguo cha chaguo
mifano
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
kufaa ya kufungua kwa msingi wa chaguo cha kibofu
mifano
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* 提示：请使用 width: 100%，以实现全宽按钮 */
有关如何使用 CSS 设置按钮样式的更多知识，请学习我们的 CSS Kibaridi 教程。
响应式菜单
请调整 TIY 编辑器窗口的大小来查看效果。当屏幕的宽度小于 600 像素时，使两列上下堆叠而不是左右堆叠。
高级：接下来的例子使用 媒体查询 来创建响应式表单。在下一章中，您将学到更多相关知识。
