CSS 表单

通过使用 CSS，可以极大地改善 HTML 表单的外观：

亲自试一试

设置输入字段的样式

အမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး width 属性来确定输入字段的宽度：

ဌာန

input {
  width: 100%;
}

亲自试一试

上例适用于所有 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器：

  • input[type=text] - 将仅选择文本字段
  • input[type=password] - 将仅选择密码字段
  • input[type=number] - 将仅选择数字字段
  • 等等...

填充输入框

အမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး padding 属性在文本字段内添加空间。

အဆိုပါ若有很多输入，那么您可能还需要添加外边距，以便在它们之外添加更多空间：

ဌာန

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

亲自试一试

请注意，我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。

ကျွန်ုပ်၏ စတုံးပေါင်း Box Sizing အခြေခံ ပြင်ဆင် ပေးနိုင်သော အချက်အလက် အသုံးပြု ပြီး အခြေခံ ပြင်ဆင် ပေးနိုင်သော အချက်အလက်: box-sizing အခြေခံ ပြင်ဆင် ပေးနိုင်သော အချက်အလက် အသုံးပြု ပေးနိုင်သော အချက်အလက်:

အခြေခံ ပြင်ဆင် ပေးနိုင်သော အော်ဂန်း အော်ဂန်း

အခြေခံ ပြင်ဆင် ပေးနိုင်သော အသုံးပြု ပြီး အခြေခံ အစား အရေးပါ အော်ဂန်း ကို ပြင်ဆင် ပေးနိုင်သည်: border အခြေခံ ပြင်ဆင် ပေးနိုင်သော အချက်အလက် အသုံးပြု ပြီး အခြေခံ ပြင်ဆင် ပေးနိုင်သော အချက်အလက်: border-radius အခြေခံ ပြင်ဆင် ပေးနိုင်သော အချက်အလက် အသုံးပြု ရန်:

ဌာန

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

亲自试一试

အခြေခံ ပြင်ဆင် ပေးနိုင်သော အချက်အလက် သာ အသုံးပြု ရန်၊ အခြေခံ ပြင်ဆင် ပေးနိုင်သော အချက်အလက် အသုံးပြု ရန်: border-bottom အခြေခံ ပြင်ဆင် ပေးနိုင်သော အချက်အလက်:

ဌာန

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

亲自试一试

အစီအစဉ် အရေးပါ အော်ဂန်း

အခြေခံ ပြင်ဆင် ပေးနိုင်သော အသုံးပြု ပြီး အခြေခံ အစား အရေးပါ အော်ဂန်း ကို ပြင်ဆင် ပေးနိုင်သည်: background-color အခြေခံ ပြင်ဆင် ပေးနိုင်သော အသုံးပြု ပြီး အခြေခံ အစား အရေးပါ အော်ဂန်း ကို ပြင်ဆင် ပေးနိုင်သည်: color အခြေခံ ပြင်ဆင် ပေးနိုင်သော အသုံးပြု ပြီး အခြေခံ အစား အရေးပါ အော်ဂန်း ကို ပြင်ဆင် ပေးနိုင်သည်:

ဌာန

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

亲自试一试

အာရုံကြည့်သူ ပြင်ဆင် သော အရေးပါ အော်ဂန်း

ပုံစံ အခြေခံ အမျိုးအစား အချို့ သည် အာရုံကြည့်သူ သဘောကျင် ပြင်ဆင် သောအခါ (ချက်ချတ်) အသုံးပြုနိုင်သော အရေးပါ အော်ဂန်း အရွယ်အစား အော်ဂန်း အော်ဂန်း အခြေခံ ပြင်ဆင် ပေးနိုင်သည် ဖြစ်ပါသည်။ အသုံးပြုနိုင်သော အရေးပါ အော်ဂန်း အော်ဂန်း ကို အသုံးပြု ရန်။ outline: none; အဆိုပါ အဆိုအော်ဂန်း ကို ဖျက်သိမ်း ရန်。

အမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး :focus အာရုံကြည့်သူ သဘောကျင် တိုက်ရိုက် အသုံးပြုနိုင်သော စကားလုံးများ အတွက် အဆိုပါ အော်ဂန်း ကို အဆိုပါ အဆိုအော်ဂန်း ကို အုတ်ဆောင် ရန် ပြင်ဆင် ပေးနိုင်သည်:

ဌာန 1

input[type=text]:focus {
  background-color: lightblue;
}

အချက်အလက် သုတေသန

亲自试一试

ဌာန 2

input[type=text]:focus {
  border: 3px solid #555;
}

အချက်အလက် သုတေသန

亲自试一试

ပုံ/အမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး

အမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး background-image အချက်အလက် သုတေသန background-position အချက်အလက် သုတေသန

ဌာန

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

亲自试一试

အမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး

အချက်အလက် သုတေသန transition အချက်အလက် သုတေသန စတုံးပေါင်း ဆောင်ရွက် အချက်အလက် သုတေသန transition အချက်အလက် သုတေသန

ဌာန

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

亲自试一试

အမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး

အဆိုပါအမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး resize အမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး

ဌာန

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 {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

亲自试一试

အမည်ဖြင့် အရွင်းချိန် စီစဥ်ပြီး

ဌာန

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 设置按钮样式的更多知识，请学习我们的 စတုံးပေါင်း နှိပ်ခတ် 教程。

响应式菜单

请调整 TIY 编辑器窗口的大小来查看效果。当屏幕的宽度小于 600 像素时，使两列上下堆叠而不是左右堆叠。

高级：接下来的例子使用 媒体查询 来创建响应式表单。在下一章中，您将学到更多相关知识。

查看响应式菜单