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

آشنایی با pseudo های مربوط به input

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

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

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

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

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

شبه کلاس focus

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

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

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

شبه کلاس focus

<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>

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

اینپوت های required

ما تو مثال بالا، از دو 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;
}

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

استایل دهی اینپوت از طریق انتخاب صفت required

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

شبه کلاس 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;
}

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

استایل دهی چک باکس ها

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

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

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

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

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

body{
   direction: rtl;
}

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

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

[/box]

نتیجه گیری

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

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

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

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

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

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

7 نظر

7 پاسخ

  1. @font-face {
    font-family: ‘IRANSans’;
    src: url(‘fontpersian/Iranian\ Sans.ttf’) format(‘truetype’);
    src: url(‘fontpersian/AIranianSans.woff’) format(‘woff’);
    }

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    }

    body{
    direction: rtl;
    }

    input {
    display: block;
    margin: 20px;
    }

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

    .name {
    padding: 20px;
    border: 2px solid #66ff00;
    border-radius: 10px;
    }

    .under-repair {
    padding: 20px;
    border: 2px solid #ff0000;
    border-radius: 10px;
    }

    فقط یه سوالی وقتی که کاربر برای مثال روی همون اینپوت اولی کلیک کنه میخوام مثلا بردرش رنگش عوض شه که من اومدم نوشتم
    .name:active {
    border: 2px solid #00c3ff;
    border-radius: 10px;
    transition: .3s ease-in;
    }
    ولی کار نکرد این میشه بگید

    1. سلام متین. اون یکی از نکات سواله، یه راهنمایی میکنم، اونم اینه که تو input ها border نقشی رو تو حالت active بازی نمیکنه.
      نکته رو پیدا کردی همینجا ذکر کن که پاسخ درستت رو ثبت کنیم 🙂

      1. .name:focus {
        border: 2px solid #00aeff;
        outline: none;
        }
        سلام من خودم یه نیم ساعتی روش فکر کردم نشد اخر رفتم تو استک اور فلو پیداش کردم

        1. سلام متين. بهترين كار رو كردي، هميشه همه چيز رو نبايد دونست، بايد سرچ كرد. مرسي ازت 🙂

  2. body{
    direction:rtl;
    }
    input::placeholder{
    font-family: iransansweb;
    font-size:1em;
    }
    input{
    height:50px;
    width:300px;
    margin:10px;
    }
    input:enabled{
    border:2px solid lightgreen;
    border-radius:10px;
    padding-right:10px;
    }
    input:disabled{
    border:2px solid red;
    border-radius:10px;
    padding-right:10px;
    background-color:rgba(0,0,0,0.1);
    }

  3. input:enabled{
    border: 3px solid green;
    border-radius: 10px;
    padding: 10px;
    display: block;
    }
    input:disabled{
    border: 3px solid red;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    }

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=