{"id":12011,"date":"2026-10-28T21:06:45","date_gmt":"2026-10-28T18:06:45","guid":{"rendered":"https:\/\/webmister.pro\/stylovani-placeholder-css\/"},"modified":"2026-10-28T21:06:45","modified_gmt":"2026-10-28T18:06:45","slug":"stylovani-placeholder-css","status":"publish","type":"post","link":"https:\/\/webmister.pro\/cz\/stylovani-placeholder-css\/","title":{"rendered":"Stylov\u00e1n\u00ed placeholderu pomoc\u00ed CSS"},"content":{"rendered":"<p>Atribut <code>placeholder<\/code> napov\u00edd\u00e1, co se od vstupn\u00edho pole \u010dek\u00e1, dokud je pr\u00e1zdn\u00e9. Kdysi jeho stylov\u00e1n\u00ed vy\u017eadovalo \u010dty\u0159i vendor prefixy, dnes sta\u010d\u00ed jedin\u00fd selektor <code>::placeholder<\/code>. Pod\u00edv\u00e1me se, jak n\u00e1pov\u011bdu upravit spr\u00e1vn\u011b, kter\u00fd trik s n\u00ed ud\u011bl\u00e1 formul\u00e1\u0159 pohodln\u011bj\u0161\u00edm a pro\u010d j\u00ed nelze nahradit popisek pole.<\/p>\n<nav class=\"wppub-toc\" aria-label=\"Table of contents\">\n<p class=\"wppub-toc__title\">Table of contents<\/p>\n<ul class=\"wppub-toc__list\">\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#to-hlavni-placeholder-neni-popisek\">To hlavn\u00ed: placeholder nen\u00ed popisek<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#jak-zmenit-barvu-a-pismo-napovedy\">Jak zm\u011bnit barvu a p\u00edsmo n\u00e1pov\u011bdy<\/a>\n<ul class=\"wppub-toc__list wppub-toc__list--sub\">\n<li class=\"wppub-toc__item wppub-toc__item--sub\"><a class=\"wppub-toc__link\" href=\"#stare-prefixy-a-proc-je-znat\">Star\u00e9 prefixy a pro\u010d je zn\u00e1t<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#dlouha-napoveda-v-uzkem-poli\">Dlouh\u00e1 n\u00e1pov\u011bda v \u00fazk\u00e9m poli<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#skryt-napovedu-pri-fokusu\">Skr\u00fdt n\u00e1pov\u011bdu p\u0159i fokusu<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#stavy-pole-a-placeholder-shown\">Stavy pole a :placeholder-shown<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#pristupnost-a-tmavy-rezim\">P\u0159\u00edstupnost a tmav\u00fd re\u017eim<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#strucne-to-hlavni\">Stru\u010dn\u011b to hlavn\u00ed<\/a><\/li>\n<\/ul>\n<\/nav>\n<h2 id=\"to-hlavni-placeholder-neni-popisek\">To hlavn\u00ed: placeholder nen\u00ed popisek<\/h2>\n<p>N\u00e1pov\u011bda zmiz\u00ed p\u0159i prvn\u00edm zadan\u00e9m znaku. \u010clov\u011bk vyru\u0161en\u00fd uprost\u0159ed formul\u00e1\u0159e u\u017e nezjist\u00ed, co vypl\u0148uje; \u010dte\u010dka obrazovky ji v \u010d\u00e1sti prohl\u00ed\u017ee\u010d\u016f v\u016fbec nep\u0159e\u010dte; automatick\u00e9 vypl\u0148ov\u00e1n\u00ed funguje h\u016f\u0159. Proto mus\u00ed m\u00edt pole skute\u010dn\u00fd popisek <code>&lt;label&gt;<\/code>, zat\u00edmco placeholder nese jen form\u00e1t nebo p\u0159\u00edklad.<\/p>\n<figure><svg viewbox=\"0 0 900 330\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u041f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u044c\u044e \u043d\u0430\u0434 \u043f\u043e\u043b\u0435\u043c\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><text fill=\"#A98086\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"28\">TAKTO NE: POPISEK \u017dIJE JEN V PLACEHOLDERU<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"46\" width=\"300\" height=\"40\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"34\" y=\"72\">Telefon ve form\u00e1tu +380\u2026<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"106\">pole pr\u00e1zdn\u00e9 \u2014 n\u00e1pov\u011bda je vid\u011bt<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M340 66 h60 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"420\" y=\"46\" width=\"300\" height=\"40\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"434\" y=\"72\">+380 67 502 45 84<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"420\" y=\"106\">za\u010dalo se ps\u00e1t \u2014 n\u00e1pov\u011bda zmizela<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"420\" y=\"128\">a co to bylo za pole, u\u017e nezjist\u00edte<\/text><text fill=\"#30738E\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"186\">TAKTO ANO: POPISEK ZVL\u00c1\u0160\u0164, PLACEHOLDER UKAZUJE FORM\u00c1T<\/text><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"214\">Telefon<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"224\" width=\"300\" height=\"40\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"34\" y=\"250\">+380 __ ___ __ __<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"284\">popisek z\u016fst\u00e1v\u00e1 v\u017edy<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M340 244 h60 m-12 -6 l12 6 l-12 6\"><\/path><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"420\" y=\"214\">Telefon<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"420\" y=\"224\" width=\"300\" height=\"40\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"434\" y=\"250\">+380 67 502 45 84<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"420\" y=\"284\">p\u0159e\u010dte ji \u010dlov\u011bk i \u010dte\u010dka obrazovky<\/text><\/svg><figcaption>Popisek jen v placeholderu a spr\u00e1vn\u00e1 varianta s label<\/figcaption><\/figure>\n<pre><code>&lt;!-- takto ne --&gt;\n&lt;input type=\"tel\" name=\"phone\" placeholder=\"Telefon ve form\u00e1tu +380\u2026\"&gt;\n\n&lt;!-- takto ano --&gt;\n&lt;label for=\"phone\"&gt;Telefon&lt;\/label&gt;\n&lt;input type=\"tel\" id=\"phone\" name=\"phone\"\n       placeholder=\"+380 __ ___ __ __\" autocomplete=\"tel\"&gt;<\/code><\/pre>\n<h2 id=\"jak-zmenit-barvu-a-pismo-napovedy\">Jak zm\u011bnit barvu a p\u00edsmo n\u00e1pov\u011bdy<\/h2>\n<p>Dnes sta\u010d\u00ed jedin\u00e9 pravidlo \u2014 <code>::placeholder<\/code> podporuj\u00ed v\u0161echny aktu\u00e1ln\u00ed prohl\u00ed\u017ee\u010de:<\/p>\n<pre><code>input::placeholder,\ntextarea::placeholder {\n    color: #8A8A8A;\n    font-style: italic;\n    opacity: 1; \/* Firefox n\u00e1pov\u011bdu ve v\u00fdchoz\u00edm stavu ztlum\u00ed *\/\n}<\/code><\/pre>\n<p>\u0158\u00e1dek s <code>opacity<\/code> nen\u00ed nav\u00edc: Firefox odjak\u017eiva vykresluje placeholder polopr\u016fhledn\u011b a bez n\u011bj vyjde zvolen\u00e1 barva bled\u0161\u00ed, ne\u017e bylo v pl\u00e1nu.<\/p>\n<p>Sada vlastnost\u00ed, kter\u00e9 se na n\u00e1pov\u011bdu skute\u010dn\u011b pou\u017eij\u00ed, je mal\u00e1: barva, pozad\u00ed, cel\u00e1 rodina <code>font-*<\/code>, prokl\u00e1d\u00e1n\u00ed p\u00edsmen a slov, <code>text-decoration<\/code>, <code>text-transform<\/code>, <code>line-height<\/code>, <code>opacity<\/code> a <code>text-overflow<\/code>. Odsazen\u00ed, r\u00e1me\u010dky a pozicov\u00e1n\u00ed neplat\u00ed \u2014 to pat\u0159\u00ed samotn\u00e9mu poli.<\/p>\n<h3 id=\"stare-prefixy-a-proc-je-znat\">Star\u00e9 prefixy a pro\u010d je zn\u00e1t<\/h3>\n<p>\u010cl\u00e1nky star\u00e9 p\u011bt let psaly tent\u00fd\u017e efekt takto:<\/p>\n<pre><code>::-webkit-input-placeholder { color: #8A8A8A; }\n::-moz-placeholder          { color: #8A8A8A; }\n:-moz-placeholder           { color: #8A8A8A; }\n:-ms-input-placeholder      { color: #8A8A8A; }<\/code><\/pre>\n<p>D\u016fvodem bylo, \u017ee standard neexistoval a ka\u017ed\u00e9 j\u00e1dro si stylov\u00e1n\u00ed vy\u0159e\u0161ilo po sv\u00e9m: v IE a ve Firefoxu do verze 19 byl placeholder pseudot\u0159\u00eddou, ve WebKitu a Blinku pseudoelementem. Dnes tyto \u0159\u00e1dky pot\u0159ebuj\u00ed jen projekty s podporou velmi star\u00fdch prohl\u00ed\u017ee\u010d\u016f. D\u016fle\u017eit\u00fd detail: tyto selektory nelze spojit \u010d\u00e1rkou \u2014 prohl\u00ed\u017ee\u010d, kter\u00fd jeden z nich nezn\u00e1, zahod\u00ed cel\u00e9 pravidlo.<\/p>\n<h2 id=\"dlouha-napoveda-v-uzkem-poli\">Dlouh\u00e1 n\u00e1pov\u011bda v \u00fazk\u00e9m poli<\/h2>\n<p>Na telefonu se pole zu\u017euj\u00ed a dlouh\u00fd text se o\u0159\u00edzne uprost\u0159ed slova. T\u0159i te\u010dky vypadaj\u00ed \u00fahledn\u011bji:<\/p>\n<pre><code>input::placeholder {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n}<\/code><\/pre>\n<p>Trik funguje, ale l\u00e9\u010d\u00ed n\u00e1sledek. Pokud se n\u00e1pov\u011bda nevejde, je p\u0159\u00edli\u0161 dlouh\u00e1: vzor \u201e+380 __ ___ __ __\u201c se \u010dte l\u00e9pe ne\u017e v\u011bta p\u0159es celou \u0161\u00ed\u0159ku.<\/p>\n<h2 id=\"skryt-napovedu-pri-fokusu\">Skr\u00fdt n\u00e1pov\u011bdu p\u0159i fokusu<\/h2>\n<p>Prohl\u00ed\u017ee\u010de se chovaj\u00ed r\u016fzn\u011b: jedny placeholder odstran\u00ed, jakmile kurzor dosedne, jin\u00e9 ho dr\u017e\u00ed do prvn\u00edho znaku. Sjednot\u00ed to jedin\u00fd \u0159\u00e1dek:<\/p>\n<pre><code>input:focus::placeholder,\ntextarea:focus::placeholder {\n    color: transparent;\n}<\/code><\/pre>\n<p>Hez\u010d\u00ed je plynul\u00e9 odsunut\u00ed:<\/p>\n<pre><code>input::placeholder {\n    opacity: 1;\n    transition: opacity .2s ease, transform .2s ease;\n}\n\ninput:focus::placeholder {\n    opacity: 0;\n    transform: translateX(6px);\n}<\/code><\/pre>\n<h2 id=\"stavy-pole-a-placeholder-shown\">Stavy pole a :placeholder-shown<\/h2>\n<p>Samostatn\u00e1 pseudot\u0159\u00edda <code>:placeholder-shown<\/code> plat\u00ed, dokud je pole pr\u00e1zdn\u00e9 a n\u00e1pov\u011bda vid\u011bt. Stoj\u00ed na n\u00ed triky, kter\u00e9 se d\u0159\u00edv d\u011blaly skriptem.<\/p>\n<figure><svg viewbox=\"0 0 900 290\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><text fill=\"#848484\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"28\">T\u0158I STAVY POLE A JEJICH SELEKTORY<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"56\" width=\"260\" height=\"42\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"83\">Va\u0161e jm\u00e9no<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"122\">pr\u00e1zdn\u00e9, n\u00e1pov\u011bda vid\u011bt<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"13px\" font-family=\"\" sfmono-regular menlo consolas monospace x=\"20\" y=\"150\">::placeholder<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"13px\" font-family=\"\" sfmono-regular menlo consolas monospace x=\"20\" y=\"174\">:placeholder-shown<\/text><rect fill=\"#232323\" stroke=\"#30738E\" stroke-width=\"2\" x=\"320\" y=\"56\" width=\"260\" height=\"42\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"336\" y=\"83\">Va\u0161e jm\u00e9no<\/text><rect x=\"336\" y=\"66\" width=\"1.5\" height=\"22\" fill=\"#30738E\"><\/rect><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"122\">kurzor v poli<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"13px\" font-family=\"\" sfmono-regular menlo consolas monospace x=\"320\" y=\"150\">:focus::placeholder<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"174\">tady se n\u00e1pov\u011bda obvykle skryje<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"620\" y=\"56\" width=\"260\" height=\"42\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"636\" y=\"83\">Maxim<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"122\">je zadan\u00e1 hodnota<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"13px\" font-family=\"\" sfmono-regular menlo consolas monospace x=\"620\" y=\"150\">:not(:placeholder-shown)<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"174\">popisek se zvedne nahoru<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"232\">Selektor :placeholder-shown plat\u00ed, dokud je pole pr\u00e1zdn\u00e9 \u2014 na n\u011bm stoj\u00ed plovouc\u00ed popisek<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"258\">i zv\u00fdrazn\u011bn\u00ed nevypln\u011bn\u00fdch pol\u00ed, bez jedin\u00e9ho \u0159\u00e1dku JavaScriptu.<\/text><\/svg><figcaption>T\u0159i stavy pole a selektory, kter\u00e9 jim odpov\u00eddaj\u00ed<\/figcaption><\/figure>\n<p>Plovouc\u00ed popisek le\u017e\u00ed p\u0159es pr\u00e1zdn\u00e9 pole a zvedne se, jakmile se objev\u00ed text. Cel\u00fd efekt v CSS:<\/p>\n<pre><code>&lt;div class=\"field\"&gt;\n  &lt;input type=\"text\" id=\"name\" placeholder=\" \"&gt;\n  &lt;label for=\"name\"&gt;Va\u0161e jm\u00e9no&lt;\/label&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<pre><code>.field { position: relative; }\n\n.field label {\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    color: #8A8A8A;\n    pointer-events: none;\n    transition: transform .15s ease, font-size .15s ease;\n}\n\n\/* pole vypln\u011bn\u00e9 nebo ve fokusu \u2014 popisek jede nahoru *\/\n.field input:not(:placeholder-shown) + label,\n.field input:focus + label {\n    transform: translateY(-22px);\n    font-size: 12px;\n}<\/code><\/pre>\n<p>Mezera v <code>placeholder=\" \"<\/code> je povinn\u00e1: bez atributu pseudot\u0159\u00edda <code>:placeholder-shown<\/code> nezabere v\u016fbec.<\/p>\n<p>Tent\u00fd\u017e selektor zv\u00fdrazn\u00ed nevypln\u011bn\u00e1 povinn\u00e1 pole, a to a\u017e pot\u00e9, co se jich n\u00e1v\u0161t\u011bvn\u00edk dotkl:<\/p>\n<pre><code>input:required:not(:placeholder-shown):invalid {\n    border-color: #C0392B;\n}<\/code><\/pre>\n<h2 id=\"pristupnost-a-tmavy-rezim\">P\u0159\u00edstupnost a tmav\u00fd re\u017eim<\/h2>\n<ul>\n<li><strong>Kontrast.<\/strong> Sv\u011btle \u0161ed\u00e1 n\u00e1pov\u011bda na b\u00edl\u00e9m pozad\u00ed je klasick\u00e1 chyba. WCAG \u017e\u00e1d\u00e1 alespo\u0148 4,5:1 u b\u011b\u017en\u00e9ho textu; n\u00e1pov\u011bda sm\u00ed b\u00fdt tlumen\u00e1, ale \u010diteln\u00e1.<\/li>\n<li><strong>Neru\u0161te popisek kv\u016fli \u010dist\u00e9mu vzhledu.<\/strong> Pokud design \u017e\u00e1d\u00e1 pole bez viditeln\u00e9ho popisku, mus\u00ed popisek p\u0159esto b\u00fdt v k\u00f3du \u2014 alespo\u0148 jako <code>aria-label<\/code>.<\/li>\n<li><strong>Tmav\u00fd re\u017eim.<\/strong> Barvu n\u00e1pov\u011bdy nastavte tokenem a p\u0159epi\u0161te ji v media query:<\/li>\n<\/ul>\n<pre><code>input::placeholder { color: #8A8A8A; }\n\n@media (prefers-color-scheme: dark) {\n    input::placeholder { color: #9B9B9B; }\n}<\/code><\/pre>\n<ul>\n<li><strong>Nic d\u016fle\u017eit\u00e9ho do placeholderu.<\/strong> Po\u017eadavky na heslo, form\u00e1t data, povinnost pole \u2014 to je text vedle pole, ne mizej\u00edc\u00ed n\u00e1pov\u011bda.<\/li>\n<\/ul>\n<h2 id=\"strucne-to-hlavni\">Stru\u010dn\u011b to hlavn\u00ed<\/h2>\n<p>Ke stylov\u00e1n\u00ed n\u00e1pov\u011bdy dnes sta\u010d\u00ed <code>::placeholder<\/code> a vendor prefixy pot\u0159ebuje jen ten, kdo podporuje velmi star\u00e9 prohl\u00ed\u017ee\u010de. Pro stavy pole je tu <code>:placeholder-shown<\/code>: dr\u017e\u00ed na n\u011bm plovouc\u00ed popisek i zv\u00fdrazn\u011bn\u00ed pr\u00e1zdn\u00fdch pol\u00ed \u2014 bez JavaScriptu. Hlavn\u00ed pravidlo z\u016fst\u00e1v\u00e1: placeholder ukazuje form\u00e1t, popisek \u0159\u00edk\u00e1, o jak\u00e9 pole jde, a jedno druh\u00e9 nenahrad\u00ed.<\/p>\n<p>Pokud formul\u00e1\u0159 na va\u0161em webu funguje, ale n\u00e1v\u0161t\u011bvn\u00edci ho opou\u0161t\u011bj\u00ed v p\u016fli, <a href=\"https:\/\/webmister.pro\/cz\/contacts\/\">napi\u0161te n\u00e1m<\/a> \u2014 najdeme, kde se popt\u00e1vky ztr\u00e1cej\u00ed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jak upravit n\u00e1pov\u011bdu v pol\u00edch formul\u00e1\u0159e: selektor ::placeholder, stavy p\u0159es :placeholder-shown, plovouc\u00ed popisek, tmav\u00fd re\u017eim a p\u0159\u00edstupnost.<\/p>\n","protected":false},"author":1,"featured_media":12033,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[213],"tags":[],"class_list":["post-12011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css-cz"],"acf":[],"_links":{"self":[{"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/posts\/12011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/comments?post=12011"}],"version-history":[{"count":0,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/posts\/12011\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/media\/12033"}],"wp:attachment":[{"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/media?parent=12011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/categories?post=12011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/tags?post=12011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}