آموزش سلکتور placeholder:: در css

در طراحی با زبان css با موضوعاتی روبرو هستیم تحت عنوان سلکتور ( selector ) ! این سلکتورها درحقیقت انتخاب کننده‌هایی هستند که به شما امکان خواهند داد تا هرچیزی داخل زبان html را انتخاب کرده و روی استایل آن یا به عبارتی ظاهر آن کار کنید .

معروف‌ترین سلکتورها یا همان انتخاب کننده‌ها در css همان کلاس و آیدی هستند که بیشترین کاربرد را در طراحی سایت و نشانه گذاری داخل html دارند . برای مثال اگر نمونه کد زیر را درنظر بگیریم :

<div class="header__wrapp"></div>

در این کد ، یک تگ div ایجاد کردیم و یک کلاس با نام header__wrapp به آن اختصاص دادیم ، اکنون اگر قصد داریم تا برای header__wrapp استایل بنویسیم در داخل فایل style.css باید به شکل زیر عمل کنیم :

.header__wrapp{
	width:200px;
	height:400px;
	background-color:#ddd;
	border-radius:6px;
}

مسلما بسیاری از شما دوستان به این مورد آشنایی دارید که برای انتخاب کلاس از نقطه ( . ) استفاده کرده و برای انتخاب المان هایی که آیدی دارند از ( # ) استفاده می‌کنیم . به عبارتی هردوی این موارد یک سلکتور یا انتخاب کننده هستند که می‌توانید بسادگی به کمک آنها استایل نویسی کنید .

اما این سلکتورها برای المان هایی از html که حتما صفت class یا id داشته باشند کاربرد دارد . انتخاب کننده‌هایی وجود دارند که برای کار توسط آنها نیازی نیست تا به یک المان در html صفاتی همچون کلاس و آیدی اختصاص دهیم و می‌توان آنها را برای کل پروژه یا بخشی از تگ های html که صفت خاصی دارند به کار گرفت . برای مثال نمونه زیر :

::selection{}

در مقاله قبلی ( قبل از همین مقاله ) در مورد selection صحبت کردیم که این مثال نیز دقیقا مشابه با موضوع همین مقاله است . انتخاب کننده placeholder نیز یکی از این انتخاب کننده‌‎ها است که می‌توان به کمک آن بخش هایی را که تصور می‌کنید نمی‌توان تغییر داد ، تغییر دهید . به مثال زیر دقت کنید :

<input type="text" placeholder="your name...">

در این مثال یک تگ input داریم که یک صفت به نام placeholder دارد . placeholder مسبب این خواهد شد که یک متن کمرنگ داخل input های فرم شما نمایش داده شود و شما هنگامی که جهت تایپ کردن داخل این ورودی فرم کلیک خواهید کرد ، بمحض تایپ کردن اولین حرف ، قسمت placeholder دیگر نمایش داده نخواهد شد .

اکنون سوال اینجاست که آیا می‌توان استایل این متن را تغییر داد ؟ المان هایی مثل اندازه فونت ، رنگ متن ، شفافیت و … را می‌توان تغییر داد اما چگونه ؟

چگونه به placeholder استایل دهیم ؟

برای اینکه به بخش placeholder استایل دهیم می‌توانیم به دو روش عمل کنیم ، اول اینکه برای کل پروژه استایل نویسی کنیم و تمامی placeholder های موجود در داخل فرم‌های پروژه را تغییر دهیم و یا اینکه برای قسمت خاصی از المان های فرم این کار را انجام دهیم مثلا تنها برای قسمت‌های textarea ویژگی های placeholder را تغییر دهیم . برای اینکار باید کد زیر را داخل فایل style.css قرار دهید :

::placeholder{
	font-size:14px;
	color:#ddd;
	opacity:0.8;
}

در این کد شما تمامی placeholder های موجود داخل المان های فرم همچون input و textarea را تغییر خواهید داد که انجام این کار به این روش توصیه می‌شود . اما اگر قصد داشتید تا برای تنها یک بخش این کار را انجام دهید باید به شکل زیر عمل کنید ، مثلا :

input::placeholder{
	font-size:13px;
}

حتی می‌توان برای حالت های خاص‌تر کدنویسی کرد مثلا برای قسمت هایی که برای کلمه عبور استفاده می‌کنید ، رنگ placeholder را پررنگ تر کنید ، همانند مثال زیر :

input[type="password"]::placeholder{
	color:#111;
}

پس توسط این ویژگی و سلکتور جذاب در css می‌توان روی قسمت پلیس‌هولدر نیز به راحتی کار کرد . در این قسمت استایل هایی که معمولا تغییر می‌دهیم ، رنگ متن داخل placeholder و اندازه فونت آن را تغییر می‌دهیم و تغییر آیتم های بیشتری از این بخش توصیه نمی‌شود .

زبان طراحی سی اس اس امکانات بسیاری را در اختیار شما قرار داده است اما لازم است تا با آنها آشنایی داشته باشید . در اینصورت می‌توان روی پروژه های طراحی سایت با قدرت بیشتری کار کرد . حتی ریزترین موارد نیر در طراحی سایت شما تاثیر دارند فلذا قسمت هایی همچون مثال این صفحه ، می‌تواند بسیار به شما در جهت کنترل قسمت های مختلف صفحه کمک کند .

تقریبا تمامی استایل های مربوط به بخش متون را می‌توان داخل بخش placeholder تغییر داد یعنی استایل هایی همچون font-size و font-weight و color و font-style و … را در این بخش اضافه کرد . اما همانطور که در بالا گفته شد بهتر است تغییرات داخل این قسمت بسیار ریز باشد . امیدواریم محتوای این بخش برای شما مفید واقع شود . سئوالات خودتان را در این مورد داخل بخش دیدگاه‌ها با ما به اشتراک بگذارید . موفق باشید .