diff --git a/files/uk/web/css/_doublecolon_placeholder/index.md b/files/uk/web/css/_doublecolon_placeholder/index.md index 9fc7dc38f..66cc5a834 100644 --- a/files/uk/web/css/_doublecolon_placeholder/index.md +++ b/files/uk/web/css/_doublecolon_placeholder/index.md @@ -89,6 +89,7 @@ input::placeholder { color: red; font-size: 1.2em; font-style: italic; + opacity: 0.5; } ``` @@ -98,31 +99,40 @@ input::placeholder { ### Непрозорий текст -Частина браузерів (наприклад, Firefox) задає усталене значення {{cssxref("opacity")}} для заповнювачів меншим за 100%. Якщо ви хочете, щоб текст-заповнювач був повністю непрозорим, задайте значення `opacity` рівним `1`. +Частина браузерів робить текст заповнювача прозорішим. Якщо потрібен цілком непрозорий текст, слід задати значення властивості {{CSSXref("color")}} явно. Можна скористатися значенням [`currentColor`](/uk/docs/Web/CSS/color_value#kliuchove-slovo-currentcolor), щоб задати той же колір, що заданий для відповідного елемента поля. #### HTML ```html - - + + + ``` #### CSS ```css -::placeholder { +input { + font-weight: bold; color: green; } -.force-opaque::placeholder { - opacity: 1; +.explicit-color::placeholder { + /* використовувати той же колір, що і в елементі поля, щоб не дати браузеру задати усталений колір */ + color: currentColor; } -``` -#### Результат +.opacity-change::placeholder { + /* прозоріший текст */ + color: color-mix(in srgb, currentColor 70%, transparent); +} +``` {{EmbedLiveSample("neprozoryi-tekst", 200, 60)}} +> [!NOTE] +> Зверніть увагу на те, що різні браузери використовують для тексту заповнювача різні кольори. Наприклад, Firefox використовує колір елемента поля з непрозорістю 54%, а Chrome використовує колір `darkgray`. Якщо потрібен однаковий колір тексту-заповнювача у всіх браузерах, слід задавати властивість `color` явно. + ## Специфікації {{Specifications}} @@ -135,4 +145,4 @@ input::placeholder { - Псевдоклас {{cssxref(":placeholder-shown")}} оформлює елемент, який _має_ активний заповнювач. - Споріднені елементи HTML: {{HTMLElement("input")}}, {{HTMLElement("textarea")}} -- [Форми HTML](/uk/docs/Learn/Forms) +- [Форми HTML](/uk/docs/Learn_web_development/Extensions/Forms)