آموزش قالب دادن ( Style ) به Placeholder در Input های HTML

چگونه به Input ها در Placeholder استایل بدهیم؟ چند روز پیش، گرافیست تیم طراحی از من خواست رنگ Placeholder که داخل تگ Input گذاشته بودم، تغییر بدم، یخورده که کلی به قضیه نگاه کردم، بهش گفتم نمیشه و ایشونم پذیرفت!  اما یکم که فکر کردم گفتم حتما شدنیه و کار نشد نداره، که با کمی تلاش و مطالعه، تونستم راحشو پیدا کنم. علم برنامه نویسی یک مزیتی که دارد، این است که شما هر کاری که به فکرتان میرسد.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
  1. Placeholder Style

میتوانید از طریق برنامه نویسی پیاده سازی کنید و اگر احیانا سوال یا خواسته ای از یک برنامه نویس داشتید یا پرسیدید، و پاسخ نمیشه را شنیدین، میشه یجورایی به علم اون برنامه نویس شک کرد. اما این نکته هم قابل بیان می باشد که علم برنامه نویسی روزبه روز یا حتی ساعت به ساعت در حال پیشرفت می باشد. و نمیتوان محدودیتی برای آن در نظر گرفت و اگر برنامه نویس در حد اطلاعات فعلی خود بماند و هیچ پیشرفتی نکند و مطالعه ای نداشته باشد، میتوان به جرات گفت که تا کمتر از یک سال دانسته هایی که داره، منقضی می شوند!

Placeholder Style

اولین کاری که برای Style دادان به Placeholder باید انجام داد، طراحی یک فرم بسیار ساده می باشد

<form>
        <label class="label-panel-Admin">نام</label>
        <input type="text" placeholder="نام خود را وارد کنید" class="Name form-control"/>
        <br/>
        <label class="label-panel-Admin">ایمیل</label>
        <input type="email" placeholder="ایمیل خود را وارد کنید" class="Mail form-control"/>
        <br/>
        <label class="label-panel-Admin">پیام</label>
        <textarea placeholder="متن پیام را وارد کنید" class="Message form-control" rows="10"></textarea>
    </form>

همان طور که در اینجا مشاهده می کنید، ما 2 Input و یک textarea در کد قرار دادیم. کلاس هایی که داده شده کاملا سلیقه ای می باشد و شما میتوانید خود به دلخواه خودتان کلاس ها را تغییر دهید. در این تیکه کد من از Bootstrap هم استفاده کردم، که بتوانم خیلی سریع تر کد بزنم و خروجی کد من یک مقداری کاربر پسند تر باشه. خروجی کد بالا بدین شکل است.

پیش نمایش فرم

همان طور که در خروجی بالا مشاهده می کنید، رنگ Placeholder تقریبا طوسی می باشد. در تمامی مرورگرها رنگ پیش فرضی که برای Placeholder در نظر گرفته می شود، طوسی می باشد که در بعضی از عکس ها، روشن تر و در بعضی دیگر، تیره تر می باشد.اینکه بخواهیم در تمامی پروژه ها که از نظر رنگ بندی طبیعتا با هم متفاوت می باشند، از رنگ پیش فرضی که مرورگر به Placeholder می دهد، استفاده کنیم، ممکن است باعث شود که سایت ها و کار های ما یکنواخت شود و جذابیت خود را از دست بدهد، برای حل این مشکل، ما باید بتوانیم به Placeholder نسبت به سلیقه و ذوق خودمان Style بدهیم. برای انجام این کار کافیست تا بتوانیم Placeholder را داخل CSS انتخاب و Select کنیم، که برای Select کردن Placeholder از کد زیر استفاده می کنیم،

::-webkit-input-placeholder { color: red; }

        :-moz-placeholder { color: red; }

        ::-moz-placeholder { color: red; }

        :-ms-input-placeholder { color: red; }

نکته ای که در اینجا شاید برای شما سوال باشد این است که چرا دوبار از moz-placeholder- استفاده شد؟ دلیل این کار این است که اگر دقت کنید یک بار در ابتدای کد از :: و یک بار هم در ابتدای کد از : استفاده شده است که دلیل آن هم بحث پشتیبانی مرورگرها می باشد، که تیکه کد اولی که ابتدای آن از :: استفاده شده است، از مرورگرهای firefox ورژن 19 به بالا پشتیبانی میکند و تیکه کد : از مرورگرهای firefox ورژن های 18 به پایین پشتیبانی می کند. در هر صورت اگر من پروژه خود را دوباره اجرا کنم، این انتظار دارم تا همه ی Placeholder هایی که من در پروژه استفاده کرده ام، رنگشان قرمز شود.

پیش نمایش فرم

همان طور که مشاهده می کنید، Placeholder ها همگی به رنگ قرمز درآمده اند، علاوه بر Color شما میتوانید از سایر Style های CSS برای شخصی سازی Placeholder استفاده کنید. اما یک مشکل تقریبا بزرگ در اینجا وجود دارد، آن هم این که، اگر من در پروژه خود، چندین صفحه داشته باشم و در هر کدام از این صفحات، از Input ها و Placeholder های متعدد استفاده کنم، این کد ها و دستورات باعث میشوند تمامی Placeholder ها رنگشان قرمز شود، این خود یک مشکل بزرگ می باشد. راه حل این مشکل هم بسیار ساده می باشد. برای حل این مشکل کافیست برای Input ها کلاس هایی تعریف کنیم و به ابتدای کدهای قبلی اضافه کنیم.

.Name::-webkit-input-placeholder { color: red; }

        .Name:-moz-placeholder { color: red; }

        .Name::-moz-placeholder { color: red; }

        .Name:-ms-input-placeholder { color: red; }

        .Mail::-webkit-input-placeholder { color:blue; }

        .Mail:-moz-placeholder { color: blue; }

        .Mail::-moz-placeholder { color: blue; }

        .Mail:-ms-input-placeholder { color: blue; }

        .Message::-webkit-input-placeholder { color:green; }

        .Message:-moz-placeholder { color: green; }

        .Message::-moz-placeholder { color: green; }

        .Message:-ms-input-placeholder { color: green; }

همان طور که در این کدها مشاهده می کنید، من به ابتدای کد ها سه کلاس Name. و Mail. و Message. را اضافه کردم، که خروجی کدهای بالا بدین شکل تغییر پیدا کرد.

پیش نمایش فرم

همان طور که مشاهده می کنید، Placeholder های مربوط به کلاس های .Name به رنگ قرمز و Placeholder های مربوط به کلاس .Mail به رنگ آبی و Placeholder های مربوط به .Message به رنگ سبز نمایش داده شده اند. بدین ترتیب اگر داخل پروژه چندین صفحه و فرم و Placeholder داشته باشیم، میتوانیم به صورت دلبخواهی، به هر کدام از Placeholder ها که مد نظرمان است Style بدهیم. امیدوارم نکته ای که به آن پرداختم مفید بوده باشه. توسینسو باشید!


نظرات