در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

نحوه ی Style دادن به Placeholder در Input های HTML

با سلام خدمت تمامی دوستان و اساتید itpro

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

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


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 بدهیم.

امیدوارم نکته ای که به آن پرداختم مفید بوده باشه.itpro باشید!

نویسنده: امیرحسین میرزایی

منبع:انجمن تخصصی فناوری اطلاعات ایران

#طراحی_صفحات_وب_با_html_و_css #سفارشی_کردن_placeholder #تغییر_رنگ_placeholder #نحوه_style_دادن_به_placeholder
عنوان
1 نحوه ی Style دادن به Placeholder در Input های HTML رایگان
2 نحوه ی قرار دادن آیکون در داخل Placeholder رایگان
زمان و قیمت کل 0″ 0
2 نظر
ریحانه ترابی

عالی بود

اگه بخایم به جای نوشته یه آیکن برا placeholder بزاریم چیکار کنیم؟غیر از اینکه بکگراند اینپوتش کنیم راه دیگه هس؟

مثلا میخام از آیکن های بوتسترپ استفاده کنم برا placeholder

وب سایت توسینسو

امیرحسین میرزایی

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

میتونید به این لینک مراجعه کنید

نحوه ی قرار دادن آیکون در داخل Placeholder

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....