Kwarin Form CSS

tongguo shiyong CSS, keyi ge dida de gaijin HTML biaodan de chanshu:

亲自试一试

shezhi shuruku kuang de yanshi

استفاده می‌کنیم width suoyong shuxing queding shuruku kuang de kuandu:

شوغول

input {
  width: 100%;
}

亲自试一试

shang li shi yingyong yu suoyou <input> yuan素。Ruguo zhi xiang shezhi tezhiding shuruku leixing de yanshi, na nashi neng shiyong shuxing xuanzhuanqi:

  • input[type=text] - jingxuan wenziti ziduan
  • input[type=password] - jingxuan mima ziduan
  • input[type=number] - jingxuan jingshu ziduan
  • 等等...

tianjia yuanshi

استفاده می‌کنیم padding suoyong shuxing zai wenzitiankuang nei tianjia kongjian.

توضیح:ru guo you hen duo shuruku, na nashi neng xiang xia tianjia waibianju, yiding zai tamen zhi wai tianjia geng duo kongjian:

شوغول

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

亲自试一试

qingzhushi, women yi jing jiang box-sizing suoyong shuxing shezhi wei border-box。Zhe yang kexi baozheng yuansu de zong kuandu he gaodu zhong bao hanshuai (tianji) he zuihou de biankuang.

qing zai zai women de CSS Box Sizing zhe yi zhang zhong xue hui youguan box-sizing suoyong shuxing de geng duo zhishi.

dai biankuang de shuruku kuang

qing shiyong border suoyong shuxing gaijian biankuang de cuocai he lanse, bing shiyong border-radius suoyong shuxing tianjia yuanjiao:

شوغول

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

亲自试一试

ru guo zhi xuan xia biankuang, qing shiyong border-bottom shuxing:

شوغول

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

亲自试一试

caise de shuruku kuang

qing shiyong background-color suoyong yuanshi xingneng tianjia beijingsese de shuxing, bing shiyong color suoyong yuanshi xingneng gaijian wenzitianse de shuxing:

شوغول

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

亲自试一试

huode jiaodian de shuruku kuang

Mianxian shang, zhenxie liulanqi zai huode jiaodian (dianji) shi hui zai shuruku kuweizi yuanwei tianjia lanse luoju. outline: none; lai quxia zhe ge xingwei.

استفاده می‌کنیم :focus Selector zai shuruku mang duochu jiaodian shi keyi weiqu ta shezhi yanshi:

مثال 1

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

النقر في مربع النص:

亲自试一试

مثال 2

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

النقر في مربع النص:

亲自试一试

مربعات ورودی مع الرمز/صورة

إذا كنت ترغب في إضافة رمز/صورة في مربع الإدخال، يرجى استخدامه background-image خصائص، وأنها قد تكون مصحوبة background-position باید با استفاده از این خصائص تنظیم شود. يجب الانتباه إلى أننا أضفنا مرونة كبيرة في اليسار (padding-left) لتحرير مساحة الرمز:

شوغول

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 ھایفتی نینگا في هذا الفصل سنتعلم المزيد عن transition معرفة الخصائص.

شوغول

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

亲自试一试

تایپ استایل برای فیلد‌های متن

توضیح:استفاده می‌کنیم resize الخصائص تمنع تثبیت حجم textareas (منع استفاده از‘مکیدنده’در گوشه‌ی سمت راست):

شوغول

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 设置按钮样式的更多知识，请学习我们的 CSS ھایفتی نینگا 教程。

响应式菜单

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

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

查看响应式菜单