{"id":43571,"date":"2026-07-24T08:00:29","date_gmt":"2026-07-24T05:00:29","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=43571"},"modified":"2026-07-24T08:00:57","modified_gmt":"2026-07-24T05:00:57","slug":"css-ile-placeholder-metin-stilini-ozellestirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/","title":{"rendered":"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme"},"content":{"rendered":"

CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme<\/h2>\n

Placeholder metin, kullan\u0131c\u0131lar\u0131n bir form alan\u0131na ne t\u00fcr bilgi girmeleri gerekti\u011fini anlamalar\u0131na yard\u0131mc\u0131 olan, genellikle soluk renkte ve alan\u0131n i\u00e7inde g\u00f6r\u00fcnen bir metindir. HTML’de placeholder<\/code> \u00f6zniteli\u011fi ile tan\u0131mlan\u0131r. Taray\u0131c\u0131lar bu metni \u00f6zel bir \u015fekilde i\u015fler ve bu da standart CSS se\u00e7icilerle do\u011frudan eri\u015filmesini engeller. Ancak, CSS’in g\u00fc\u00e7l\u00fc \u00f6zellikleriyle placeholder metninin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tamamen kontrol etmek m\u00fcmk\u00fcnd\u00fcr. Bu makalede, CSS ile placeholder metin stilini nas\u0131l \u00f6zelle\u015ftirebilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

Placeholder Metninin \u00d6nemi ve Kullan\u0131m Alanlar\u0131<\/h3>\n

Placeholder metin, kullan\u0131c\u0131 deneyimini (UX) iyile\u015ftirmede \u00f6nemli bir rol oynar. Kullan\u0131c\u0131lara bir giri\u015f alan\u0131n\u0131n ne ama\u00e7la kullan\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rsel olarak belirtir, etiketlerin (labels) her zaman g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 gerektiren durumlar i\u00e7in bir alternatif sunar veya etiketleri destekleyici bir bilgi olarak kullan\u0131l\u0131r. \u00d6zellikle mobil cihazlarda, ekran alan\u0131n\u0131n k\u0131s\u0131tl\u0131 olmas\u0131 nedeniyle placeholder metinler daha da de\u011ferli hale gelir.<\/p>\n

Kullan\u0131m alanlar\u0131 \u015funlar\u0131 i\u00e7erir:<\/p>\n

* Form Alanlar\u0131:<\/strong> Ad, soyad, e-posta, telefon numaras\u0131 gibi standart giri\u015f alanlar\u0131.
\n* Arama \u00c7ubuklar\u0131:<\/strong> Kullan\u0131c\u0131lar\u0131n ne arayabileceklerini y\u00f6nlendirmek i\u00e7in.
\n* Mesaj Alanlar\u0131:<\/strong> Sohbet uygulamalar\u0131nda veya geri bildirim formlar\u0131nda.
\n* Parola Alanlar\u0131:<\/strong> Parola gereksinimlerini belirtmek i\u00e7in.<\/p>\n

Etkili bir placeholder metin, k\u0131sa, anla\u015f\u0131l\u0131r ve kullan\u0131c\u0131n\u0131n ne yapmas\u0131 gerekti\u011fini net bir \u015fekilde ifade etmelidir. Ancak, placeholder metnin tek ba\u015f\u0131na bir etiket (label) yerine kullan\u0131lmamas\u0131 gerekti\u011fini unutmamak \u00f6nemlidir. Eri\u015filebilirlik a\u00e7\u0131s\u0131ndan, etiketler her zaman bir form kontrol\u00fcyle ili\u015fkilendirilmelidir.<\/p>\n

Placeholder Metnini Stilize Etmenin Zorluklar\u0131<\/h3>\n

Placeholder metin, standart bir HTML \u00f6\u011fesi gibi davranmaz. Taray\u0131c\u0131lar, placeholder metnini input veya textarea \u00f6\u011fesinin kendisinden farkl\u0131 bir “s\u00f6zde \u00f6\u011fe” (pseudo-element) olarak ele al\u0131r. Bu durum, CSS ile do\u011frudan stil vermeyi karma\u015f\u0131kla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, input::placeholder { color: red; }<\/code> gibi bir se\u00e7ici, \u00e7o\u011fu taray\u0131c\u0131da \u00e7al\u0131\u015fmaz.<\/p>\n

Bunun nedeni, placeholder metnin asl\u0131nda bir kullan\u0131c\u0131 aray\u00fcz\u00fc \u00f6\u011fesi olmaktan \u00e7ok, bir ipucu veya yer tutucu olarak tasarlanm\u0131\u015f olmas\u0131d\u0131r. Taray\u0131c\u0131lar, bu ipucunun stilini varsay\u0131lan olarak belirler. Ancak, web geli\u015ftiricilerine bu varsay\u0131lan g\u00f6r\u00fcn\u00fcm\u00fc \u00f6zelle\u015ftirme imkan\u0131 sunulmu\u015ftur.<\/p>\n

CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme Y\u00f6ntemleri<\/h3>\n

Placeholder metni stilize etmek i\u00e7in kullan\u0131lan ana y\u00f6ntem, taray\u0131c\u0131lar\u0131n sundu\u011fu \u00f6zel “s\u00f6zde s\u0131n\u0131flar” (pseudo-classes) veya “s\u00f6zde \u00f6\u011feler”dir. Bu s\u00f6zde \u00f6\u011feler, taray\u0131c\u0131 taraf\u0131ndan otomatik olarak eklenen ve placeholder metnini hedeflemek i\u00e7in kullan\u0131lan \u00f6zel se\u00e7icilerdir.<\/p>\n

En yayg\u0131n ve desteklenen s\u00f6zde \u00f6\u011feler \u015funlard\u0131r:<\/p>\n

* ::-webkit-input-placeholder<\/code> (Chrome, Safari, Opera, Edge)
\n* ::-moz-placeholder<\/code> (Firefox – eski s\u00fcr\u00fcmler)
\n* :-ms-input-placeholder<\/code> (Internet Explorer 10+ ve Edge)
\n* ::placeholder<\/code> (Standart CSS, Firefox 19+ ve modern taray\u0131c\u0131lar)<\/p>\n

Bu s\u00f6zde \u00f6\u011felerin farkl\u0131l\u0131k g\u00f6stermesinin temel nedeni, taray\u0131c\u0131lar\u0131n standartlar\u0131 uygulama s\u00fcre\u00e7lerindeki farkl\u0131l\u0131klard\u0131r. ::placeholder<\/code> s\u00f6zde \u00f6\u011fesi, CSS Selectors Level 4 standard\u0131n\u0131n bir par\u00e7as\u0131d\u0131r ve gelecekteki t\u00fcm taray\u0131c\u0131lar taraf\u0131ndan desteklenmesi beklenmektedir. Ancak, geriye d\u00f6n\u00fck uyumluluk i\u00e7in di\u011fer s\u00f6zde \u00f6\u011feleri de kullanmak \u00f6nemlidir.<\/p>\n

1. Temel Stil \u00d6zelle\u015ftirmeleri: Renk ve Font Ayarlar\u0131<\/h4>\n

Placeholder metnini stilize etmenin en yayg\u0131n yolu, metnin rengini de\u011fi\u015ftirmektir. Genellikle placeholder metin, alan\u0131n kendisinden daha soluk bir renkte g\u00f6sterilir. Bu rengi, marka kimli\u011finize uygun hale getirebilir veya metni daha belirgin hale getirebilirsiniz.<\/p>\n

\u00d6rnek: Renk De\u011fi\u015ftirme<\/strong><\/p>\n

input::placeholder {\n  color: #999; \/ Gri tonu <\/em>\/\n}\n\n\/ Geriye d\u00f6n\u00fck uyumluluk i\u00e7in <\/em>\/\ninput::-webkit-input-placeholder {\n  color: #999;\n}\n\ninput::-moz-placeholder { \/ Firefox 19+ <\/em>\/\n  color: #999;\n  opacity: 1; \/ Firefox'ta varsay\u0131lan olarak hafif \u015feffaf olabilir, bunu kald\u0131r\u0131r <\/em>\/\n}\n\ninput:-ms-input-placeholder {\n  color: #999;\n}\n\ntextarea::placeholder {\n  color: #999;\n}\n\ntextarea::-webkit-input-placeholder {\n  color: #999;\n}\n\ntextarea::-moz-placeholder {\n  color: #999;\n  opacity: 1;\n}\n\ntextarea:-ms-input-placeholder {\n  color: #999;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, hem input<\/code> hem de textarea<\/code> \u00f6\u011feleri i\u00e7in placeholder metnin rengi gri olarak ayarlanm\u0131\u015ft\u0131r. opacity: 1;<\/code> sat\u0131r\u0131, Firefox’un eski s\u00fcr\u00fcmlerinde placeholder metnin varsay\u0131lan olarak hafif \u015feffaf olmas\u0131n\u0131 engellemek i\u00e7in eklenmi\u015ftir. Modern taray\u0131c\u0131lar ::placeholder<\/code> s\u00f6zde \u00f6\u011fesini destekledi\u011fi i\u00e7in, genellikle bu tek ba\u015f\u0131na yeterli olacakt\u0131r, ancak geriye d\u00f6n\u00fck uyumluluk i\u00e7in di\u011ferlerini de eklemek iyi bir pratiktir.<\/p>\n
Font \u00f6zelliklerini de placeholder metin i\u00e7in ayarlayabilirsiniz:<\/p>\n
\u00d6rnek: Font Ayarlar\u0131<\/strong><\/p>\n
input::placeholder {\n  font-family: 'Arial', sans-serif;\n  font-style: italic;\n  font-weight: normal;\n  font-size: 1rem;\n  text-transform: uppercase; \/ Metni b\u00fcy\u00fck harfe \u00e7evirir <\/em>\/\n}\n\n\/ Di\u011fer taray\u0131c\u0131lar i\u00e7in de benzer \u015fekilde ayarlanabilir <\/em>\/<\/code><\/pre>\n
Burada, font ailesi, stil, a\u011f\u0131rl\u0131k, boyut ve b\u00fcy\u00fck harf d\u00f6n\u00fc\u015f\u00fcm\u00fc gibi \u00f6zellikler ayarlanm\u0131\u015ft\u0131r. Bu, placeholder metni sayfan\u0131n geri kalan\u0131ndaki metinlerden ay\u0131rt etmeye yard\u0131mc\u0131 olabilir.<\/p>\n
2. Daha Geli\u015fmi\u015f Stil \u00d6zelle\u015ftirmeleri: Girinti, Hizalama ve Animasyonlar<\/h4>\n
Placeholder metin stilini daha da \u00f6zelle\u015ftirmek i\u00e7in girinti (padding), hizalama (text-align) ve hatta basit animasyonlar gibi \u00f6zellikler de kullan\u0131labilir.<\/p>\n
\u00d6rnek: Girinti ve Hizalama<\/strong><\/p>\n
.styled-input {\n  padding: 10px 15px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n  font-size: 1.1rem;\n}\n\n.styled-input::placeholder {\n  color: #aaa;\n  font-size: 0.9rem;\n  font-style: italic;\n  padding-left: 20px; \/ Placeholder metni i\u00e7in ek sol girinti <\/em>\/\n  background-image: url('icon.png'); \/ Placeholder metninin arkas\u0131na ikon ekleme <\/em>\/\n  background-repeat: no-repeat;\n  background-position: left center;\n  background-size: 16px 16px;\n  text-align: left; \/ Varsay\u0131lan olarak sol hizal\u0131 <\/em>\/\n}\n\n\/ IE ve Edge i\u00e7in <\/em>\/\n.styled-input:-ms-input-placeholder {\n  color: #aaa;\n  font-size: 0.9rem;\n  font-style: italic;\n  padding-left: 20px;\n  background-image: url('icon.png');\n  background-repeat: no-repeat;\n  background-position: left center;\n  background-size: 16px 16px;\n  text-align: left;\n}\n\n\/ Firefox eski s\u00fcr\u00fcmler i\u00e7in <\/em>\/\n.styled-input::-moz-placeholder {\n  color: #aaa;\n  font-size: 0.9rem;\n  font-style: italic;\n  padding-left: 20px;\n  background-image: url('icon.png');\n  background-repeat: no-repeat;\n  background-position: left center;\n  background-size: 16px 16px;\n  text-align: left;\n  opacity: 1;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, .styled-input<\/code> s\u0131n\u0131f\u0131na sahip bir giri\u015f alan\u0131n\u0131n placeholder metni i\u00e7in sol tarafa ek bir girinti (padding-left<\/code>) eklenmi\u015ftir. Ayr\u0131ca, placeholder metninin soluna bir ikon eklenmi\u015ftir. Bu, \u00f6zellikle arama \u00e7ubuklar\u0131 veya belirli bir format\u0131 belirten alanlar i\u00e7in kullan\u0131\u015fl\u0131d\u0131r. background-image<\/code>, background-repeat<\/code>, background-position<\/code> ve background-size<\/code> \u00f6zellikleri, ikonu do\u011fru yere yerle\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
3. Placeholder Metnini Odakland\u0131\u011f\u0131nda veya Doldu\u011funda Gizleme<\/h4>\n
Placeholder metnin en yayg\u0131n kullan\u0131mlar\u0131ndan biri, kullan\u0131c\u0131 alana odakland\u0131\u011f\u0131nda veya alana bir de\u011fer girdi\u011finde otomatik olarak kaybolmas\u0131d\u0131r. Bu, taray\u0131c\u0131lar\u0131n varsay\u0131lan davran\u0131\u015f\u0131d\u0131r. Ancak, bazen bu davran\u0131\u015f\u0131 de\u011fi\u015ftirmek veya \u00fczerine yazmak isteyebilirsiniz.<\/p>\n
Kullan\u0131c\u0131 Odakland\u0131\u011f\u0131nda Placeholder’\u0131 Gizleme (Varsay\u0131lan Davran\u0131\u015f)<\/strong><\/p>\n
Kullan\u0131c\u0131 bir input veya textarea alan\u0131na t\u0131klad\u0131\u011f\u0131nda ve odakland\u0131\u011f\u0131nda, placeholder metni otomatik olarak kaybolur. Bu, standart taray\u0131c\u0131 davran\u0131\u015f\u0131d\u0131r ve genellikle \u00f6zel bir CSS kodu gerektirmez.<\/p>\n
Kullan\u0131c\u0131 De\u011fer Girdi\u011finde Placeholder’\u0131 Gizleme (Varsay\u0131lan Davran\u0131\u015f)<\/strong><\/p>\n
Kullan\u0131c\u0131 bir input veya textarea alan\u0131na herhangi bir karakter girdi\u011finde, placeholder metni otomatik olarak kaybolur. Bu da standart taray\u0131c\u0131 davran\u0131\u015f\u0131d\u0131r.<\/p>\n
Placeholder’\u0131 Kullan\u0131c\u0131 Odakland\u0131\u011f\u0131nda veya De\u011fer Girdi\u011finde G\u00f6r\u00fcn\u00fcr Tutma (Nadiren Kullan\u0131l\u0131r)<\/strong><\/p>\n
Bu genellikle \u00f6nerilmeyen bir davran\u0131\u015ft\u0131r \u00e7\u00fcnk\u00fc kullan\u0131c\u0131ya alan\u0131n amac\u0131n\u0131 belirtmek i\u00e7in placeholder’\u0131n varl\u0131\u011f\u0131n\u0131 ortadan kald\u0131r\u0131r. Ancak, \u00f6zel durumlar i\u00e7in JavaScript ile bu kontrol edilebilir. CSS ile do\u011frudan bir \u00e7\u00f6z\u00fcm\u00fc yoktur.<\/p>\n
Placeholder’\u0131 Kullan\u0131c\u0131 Odakland\u0131\u011f\u0131nda Stilini De\u011fi\u015ftirme<\/strong><\/p>\n
Placeholder metnin kendisini do\u011frudan focus<\/code> s\u00f6zde s\u0131n\u0131f\u0131 ile hedefleyemeyiz. Ancak, input veya textarea’n\u0131n kendisini focus<\/code> durumunda stilize edebilir ve bu stilin placeholder metnini de etkilemesini sa\u011flayabiliriz.<\/p>\n
\u00d6rnek: Odakland\u0131\u011f\u0131nda Placeholder Rengini De\u011fi\u015ftirme<\/strong><\/p>\n
Bu senaryoda, input’un focus<\/code> durumunu hedefleyerek placeholder metnini dolayl\u0131 olarak etkileriz. Ancak, modern CSS ile placeholder metnini do\u011frudan focus<\/code> durumunda stilize etmek daha zordur. Genellikle, focus<\/code> durumunda input’un kendisini stilize ederek veya JavaScript kullanarak bu t\u00fcr etkile\u015fimler y\u00f6netilir.<\/p>\n
Daha yayg\u0131n bir yakla\u015f\u0131m, kullan\u0131c\u0131n\u0131n odakland\u0131\u011f\u0131nda input’un kendisini daha belirgin hale getirmektir.<\/p>\n
input:focus::placeholder {\n  color: transparent; \/ Placeholder metnini odakland\u0131\u011f\u0131nda \u015feffaf yap <\/em>\/\n}\n\n\/ Geriye d\u00f6n\u00fck uyumluluk <\/em>\/\ninput:focus::-webkit-input-placeholder {\n  color: transparent;\n}\n\ninput:focus::-moz-placeholder {\n  color: transparent;\n}\n\ninput:focus:-ms-input-placeholder {\n  color: transparent;\n}<\/code><\/pre>\n
Bu kod par\u00e7ac\u0131\u011f\u0131, kullan\u0131c\u0131 input alan\u0131na odakland\u0131\u011f\u0131nda placeholder metnini g\u00f6r\u00fcnmez hale getirir. Bu, genellikle placeholder’\u0131n kaybolmas\u0131yla ayn\u0131 etkiyi yarat\u0131r.<\/p>\n
4. Eri\u015filebilirlik ve Placeholder Metin<\/h4>\n
Placeholder metin, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in harika bir ara\u00e7 olsa da, eri\u015filebilirlik a\u00e7\u0131s\u0131ndan baz\u0131 \u00f6nemli hususlar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak gerekir:<\/p>\n
*   Etiketlerin Yerine Kullan\u0131lmamal\u0131d\u0131r:<\/strong> Placeholder metinler, label<\/code> \u00f6\u011felerinin yerine asla kullan\u0131lmamal\u0131d\u0131r. Ekran okuyucular, placeholder metnini her zaman bir etiket olarak alg\u0131lamayabilir veya kullan\u0131c\u0131lar alan\u0131n ne oldu\u011funu anlamakta zorlanabilir. Her zaman bir label<\/code> \u00f6\u011fesi kullan\u0131n ve placeholder’\u0131 ek bilgi veya ipucu olarak ekleyin.
\n*   Yetersiz Kontrast:<\/strong> Placeholder metinler genellikle soluk renklerde oldu\u011fundan, d\u00fc\u015f\u00fck kontrast oranlar\u0131na sahip olabilir. Bu, g\u00f6rme bozuklu\u011fu olan kullan\u0131c\u0131lar i\u00e7in okunabilirli\u011fi azaltabilir. Yeterli kontrast oran\u0131n\u0131 sa\u011flamak i\u00e7in renk se\u00e7imlerinizi dikkatli yap\u0131n. WCAG (Web Content Accessibility Guidelines) standartlar\u0131na uyun.
\n*   K\u0131sa S\u00fcreli G\u00f6r\u00fcn\u00fcrl\u00fck:<\/strong> Kullan\u0131c\u0131 bir alana odakland\u0131\u011f\u0131nda veya de\u011fer girdi\u011finde placeholder metni kaybolur. Bu, kullan\u0131c\u0131lar\u0131n alan\u0131n amac\u0131n\u0131 sonradan hat\u0131rlamakta zorlanmas\u0131na neden olabilir. Bu nedenle, kritik bilgiler i\u00e7in placeholder’a g\u00fcvenmeyin.
\n*   Taray\u0131c\u0131 Uyumlulu\u011fu:<\/strong> Farkl\u0131 taray\u0131c\u0131lar\u0131n placeholder metinleri nas\u0131l i\u015fledi\u011fi konusunda k\u00fc\u00e7\u00fck farkl\u0131l\u0131klar olabilir. Bu nedenle, stilize etti\u011finiz placeholder metinlerin t\u00fcm \u00f6nemli taray\u0131c\u0131larda tutarl\u0131 g\u00f6r\u00fcnd\u00fc\u011f\u00fcnden emin olmak i\u00e7in testler yap\u0131n.<\/p>\n
Eri\u015filebilir Bir Placeholder \u00d6rne\u011fi:<\/strong><\/p>\n
<div class="form-group">\n  <label for="email">E-posta Adresiniz<\/label>\n  <input type="email" id="email" name="email" placeholder="ornek@alanadi.com">\n<\/div><\/code><\/pre>\n
.form-group label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n}\n\n.form-group input[type="email"] {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 1rem;\n}\n\n.form-group input[type="email"]::placeholder {\n  color: #777; \/ Orta d\u00fczeyde gri <\/em>\/\n  font-style: italic;\n  font-size: 0.9rem;\n}\n\n\/ Daha iyi kontrast i\u00e7in odakland\u0131\u011f\u0131nda <\/em>\/\n.form-group input[type="email"]:focus {\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n\/* Odakland\u0131\u011f\u0131nda placeholder'\u0131 tamamen gizlemek yerine,\n   input'un kendisini daha belirgin hale getirmek genellikle daha iyidir.\n   Ancak, e\u011fer gizlemek isterseniz: *\/\n.form-group input[type="email"]:focus::placeholder {\n  color: transparent;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, hem label<\/code> hem de placeholder<\/code> kullan\u0131lm\u0131\u015ft\u0131r. Placeholder metin, kullan\u0131c\u0131ya bir \u00f6rnek format sunarken, label<\/code> ekran okuyucular ve eri\u015filebilirlik i\u00e7in temel bilgiyi sa\u011flar. Renk se\u00e7imi, yeterli kontrast\u0131 sa\u011flamaya odaklanm\u0131\u015ft\u0131r.<\/p>\n
5. Placeholder Metin Stilini \u00d6zelle\u015ftirirken Dikkat Edilmesi Gerekenler<\/h4>\n
*   Taray\u0131c\u0131 Uyumlulu\u011fu:<\/strong> Her zaman farkl\u0131 taray\u0131c\u0131lar ve s\u00fcr\u00fcmler i\u00e7in test yap\u0131n. ::placeholder<\/code> s\u00f6zde \u00f6\u011fesi standart olsa da, geriye d\u00f6n\u00fck uyumluluk i\u00e7in di\u011fer s\u00f6zde \u00f6\u011feleri eklemek \u00f6nemlidir.
\n*   G\u00f6rsel Hiyerar\u015fi:<\/strong> Placeholder metnin stilini, form alan\u0131n\u0131n kendisinden veya etiketinden daha az belirgin hale getirin. Amac\u0131, dikkat da\u011f\u0131tmak de\u011fil, rehberlik etmektir.
\n*   Marka Kimli\u011fi:<\/strong> Renklerinizi ve fontlar\u0131n\u0131z\u0131 markan\u0131z\u0131n genel tasar\u0131m\u0131na uygun hale getirin.
\n*   Performans:<\/strong> A\u015f\u0131r\u0131 karma\u015f\u0131k CSS animasyonlar\u0131 veya arka plan g\u00f6rselleri, performans \u00fczerinde k\u00fc\u00e7\u00fck de olsa bir etkiye sahip olabilir. Genellikle, renk ve font ayarlar\u0131 yeterlidir.
\n*   Kullan\u0131c\u0131 Deneyimi:<\/strong> Placeholder metnin stilini, kullan\u0131c\u0131n\u0131n alana veri girmesini zorla\u015ft\u0131racak \u015fekilde de\u011fi\u015ftirmeyin. Okunabilirlik ve anla\u015f\u0131l\u0131rl\u0131k her zaman \u00f6ncelikli olmal\u0131d\u0131r.
\n*   JavaScript ile Kontrol:<\/strong> Baz\u0131 durumlarda, placeholder metinlerin davran\u0131\u015f\u0131n\u0131 (\u00f6rne\u011fin, belirli bir ko\u015ful alt\u0131nda gizlenmesi veya g\u00f6sterilmesi) JavaScript ile daha hassas bir \u015fekilde kontrol etmek gerekebilir. Ancak, bu genellikle CSS ile yap\u0131lamayan durumlar i\u00e7in ge\u00e7erlidir.<\/p>\n
Sonu\u00e7<\/h3>\n
CSS ile placeholder metin stilini \u00f6zelle\u015ftirmek, web formlar\u0131n\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc iyile\u015ftirmenin ve kullan\u0131c\u0131 deneyimini zenginle\u015ftirmenin etkili bir yoludur. ::-webkit-input-placeholder<\/code>, ::-moz-placeholder<\/code>, :-ms-input-placeholder<\/code> ve ::placeholder<\/code> gibi \u00f6zel s\u00f6zde \u00f6\u011feleri kullanarak, renk, font, girinti ve hatta arka plan g\u00f6rselleri gibi bir\u00e7ok \u00f6zelli\u011fi kontrol edebilirsiniz.<\/p>\n
Ancak, bu stilizasyonlar\u0131 uygularken eri\u015filebilirlik ilkelerini g\u00f6z ard\u0131 etmemek \u00e7ok \u00f6nemlidir. Placeholder metinler, etiketlerin yerini tutmamal\u0131, yeterli kontrast sa\u011flamal\u0131 ve kullan\u0131c\u0131lar\u0131n formlar\u0131 kolayca doldurmas\u0131na olanak tan\u0131mal\u0131d\u0131r. Taray\u0131c\u0131 uyumlulu\u011funu test etmek ve kullan\u0131c\u0131 deneyimini \u00f6n planda tutmak, ba\u015far\u0131l\u0131 bir placeholder metin stilizasyonu i\u00e7in anahtar unsurlard\u0131r. Bu teknikleri do\u011fru bir \u015fekilde kullanarak, daha kullan\u0131c\u0131 dostu ve g\u00f6rsel olarak \u00e7ekici web formlar\u0131 olu\u015fturabilirsiniz.<\/p>\n
\u00d6rnek kod:<\/strong> github.com\/fatihsoysalcom\/css-placeholder-text-styling-example<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme Placeholder metin, kullan\u0131c\u0131lar\u0131n bir form alan\u0131na ne t\u00fcr bilgi girmeleri gerekti\u011fini anlamalar\u0131na yard\u0131mc\u0131 olan, genellikle soluk renkte ve alan\u0131n i\u00e7inde g\u00f6r\u00fcnen bir metindir.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-43571","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme\" \/>\n<meta property=\"og:description\" content=\"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme Placeholder metin, kullan\u0131c\u0131lar\u0131n bir form alan\u0131na ne t\u00fcr bilgi girmeleri gerekti\u011fini anlamalar\u0131na yard\u0131mc\u0131 olan, genellikle soluk renkte ve alan\u0131n i\u00e7inde g\u00f6r\u00fcnen bir metindir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-24T05:00:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-24T05:00:57+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme\",\"datePublished\":\"2026-07-24T05:00:29+00:00\",\"dateModified\":\"2026-07-24T05:00:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/\"},\"wordCount\":1769,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/\",\"name\":\"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-07-24T05:00:29+00:00\",\"dateModified\":\"2026-07-24T05:00:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme","og_description":"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme Placeholder metin, kullan\u0131c\u0131lar\u0131n bir form alan\u0131na ne t\u00fcr bilgi girmeleri gerekti\u011fini anlamalar\u0131na yard\u0131mc\u0131 olan, genellikle soluk renkte ve alan\u0131n i\u00e7inde g\u00f6r\u00fcnen bir metindir.","og_url":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-07-24T05:00:29+00:00","article_modified_time":"2026-07-24T05:00:57+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme","datePublished":"2026-07-24T05:00:29+00:00","dateModified":"2026-07-24T05:00:57+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/"},"wordCount":1769,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/","url":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/","name":"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-07-24T05:00:29+00:00","dateModified":"2026-07-24T05:00:57+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-placeholder-metin-stilini-ozellestirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS ile Placeholder Metin Stilini \u00d6zelle\u015ftirme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=43571"}],"version-history":[{"count":2,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43571\/revisions"}],"predecessor-version":[{"id":43573,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43571\/revisions\/43573"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=43571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=43571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=43571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}