جلسه ۵۰ – شبه کلاس های مربوط به input

چگونه به input ها در حالت های مختلف استایل بدهیم؟ چگونه تگ input را استایل دهی کنیم؟ چگونه ورودی های فرم را استایل دهی کنیم؟

تو این مقاله از آموزش طراحی سایت با CSS، شبه کلاس هایی رو باهم یاد می‌گیریم که به انواع تگ های input مرتبط هستن.

انواع شبه کلاس های مربوط به input

• focus
• enabled
• disabled
• checked
• required
• optional

شبه کلاس focus

توسط این شبه کلاس، می‌تونیم استایل عنصر input رو، زمانی که در داخلش هستیم و می‌تونیم تایپ کنیم، تغییر بدیم.

کامل تر بگیم، این شبه کلاس زمانی کاربرد داره که عنصر مورد نظر، تحت امر کیبورده (قراره داخلش یه چیزی تایپ شه)، یا توسط ماوس فعال شده.

به مثال زیر توجه کنین:

<input type="text" placeholder="Type here...">

input{
   padding:20px;
}

input:focus{
   border: 2px solid blue;
}

فرآیند کد به صورت زیر در میاد:

نکته: به صورت کلی، عناصر مرتبط با تگ form، می‌تونن حالت focus رو به صورت پیش فرض قبول کنن. اگه با عنصر form آشنایی ندارین، می‌تونین به مقاله تگ form در HTML میزفا مراجعه کنین.

نکته: ما می‌تونیم با اختصاص صفت contenteditable به عناصر div، span، p و code، قادر به ویرایش و تغییر محتواشون در داخل مرورگر باشیم. این موضوع باعث می‌شه که اون ها هم، حالت focus رو قبول کنن.

<div contenteditable>Hello Mizfa!</div>
<p contenteditable>Hello Mizfa!</p>
<span contenteditable>Hello Mizfa!</span>
<code contenteditable>Hello Mizfa!</code>

نکته: ممکنه که بخوایم عناصر فوق، حالت focus رو قبول کنن، اما قابل ویرایش نباشن. بدین ترتیب کافیه که صفت tabindex رو بهشون اختصاص بدیم.

شبه کلاس های enabled و disabled

این شبه کلاس ها، زمانی مورد استفاده قرار می‌گیرن که با input های فعال و غیرفعال سر و کار داشته باشیم.

input ها به صورت پیش فرض، فعال هستن. همونطور که از آموزش HTML می‌دونیم، input های غیر فعال به فرم زیر نوشته می‌شن:

<input type="text" placeholder="This is a enabled input">
<input type="text" placeholder="This is a disabled input" disabled>

که نتیجه زیر رو به ما می‌ده:

حالا می‌خوایم با توجه به فعال بودن یا نبودن عنصر input، استایل هرکدوم از inputهای بالا رو تغییر بدیم. کافیه برای کد های CSS بنویسیم:

input:enabled{
   border:3px solid red;
   padding: 10px;
}
input:disabled{
   border:3px dotted blue;
   padding:10px;
}

نتیجه رو به صورت زیر مشاهده می‌کنیم:

شبه کلاس های required و optional

این شبه کلاس ها، برای انتخاب inputهایی به کار میرن که دارای صفات required و یا optional هستن.

صفت required، زمانی به کار می‌ره که ما می‌خوایم عنصر input مورد نظر، حتما پر بشه.

همچنین صفت optional، صفت پیش فرض input هایی هست که صفتی بهشون نسبت نمیدیم و برخلاف صفت required، اجباری برای پر کردن input به ما نمیده.

برای مطالعه ی کامل کاربرد این دو صفت، می‌تونین به مقاله خفن آشنایی با تگ Input و خاصیت های آن در HTML مراجعه کنین 🙂

کد HTML مورد نظر ما، به شکل زیر نوشته می‌شه:

<form>
   <input type="text" placeholder="ٌWrite something here" required>
   <input type="submit">
</form>

و به شکل زیر نمایش داده می‌شه:

ما تو مثال بالا، از دو input استفاده کردیم.

input اول، از نوع text و دارای صفت required هست و حتما باید پر بشه.

input دوم، از نوع submit هست و صفتی براش نوشته نشده، اما به صورت پیش فرض دارای صفت optional محسوب می‌شه.

حالا کد CSS زیر رو برای ساختار HTML بالا می‌نویسیم:

input:required{
   border:3px solid red;
   padding: 10px;
}
input:optional{
   border:3px solid green;
   border-radius: 10px;
   padding:10px;
}

نتیجه کد به صورت زیر قابل مشاهدست:

اگه جایی براتون سوال پیش اومد، حتما تو قسمت نظرات بپرسین تا کمکتون کنیم.

شبه کلاس checked

این شبه کلاس، برای input ها از نوع radio و checkbox به کار می‌ره، البته زمانی که تیک خورده باشن!

نکته: input ها از نوع  radio و checkbox، تو قبول کردن کد های CSS تا حد زیادی ناتوان هستن و فقط می‌تونن خصوصیاتی مثل margin و خصوصیات معدود دیگری رو قبول کنن.

به کد HTML زیر توجه کنین:

<div>
   HTML
   <input type="radio">
</div>
<div>
   CSS
   <input type="radio">
</div>
<div>
   Javascript
   <input type="radio">
</div>

می‌خوایم کدی رو بنویسیم که input تیک خورده، به فاصله ۱۰ پیکسل از سمت چپ خودش حرکت کنه. کافیه بنویسیم:

input:checked{
   margin-left:30px;
}

نتیجه به صورت زیره:

پایان ترم

سوال:

کد HTML زیر به ما داده شده:

<form>
   <input type="text" placeholder="لطفا نام خود را وارد نمایید...">
   <input type="email" placeholder="فیلد مورد نظر در حال تعمیر است!" disabled>
</form>

و نتیجه زیر مد نظره:

چه کد CSSای می‌تونیم براش بنویسیم؟

نکته: از دو کد زیر می‌تونین برای تغییر دادن جهت نوشتار در صفحه و تغییر دادن فونت placeholder استفاده کنین:

body{
   direction: rtl;
}

input::placeholder{
   font-family: iransansweb;
}

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله از آموزش کامل CSS ، با چگونگی استفاده از شبه کلاس ها در استایل دادن به input ها آشنا شدیم.

دیدیم که خود input‌ها می‌تونن حالت های متفاوتی داشته باشن و ما می‌تونیم متناسب با این حالت ها، اون ها رو انتخاب کرده و بهشون استایل بدیم.

در مقاله بعد، به بررسی شبه کلاس های موقعیت محور می‌پردازیم.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌ شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی‌