From 23f6f504adef185e0bfa10cd4a10de5d4dc1de83 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 7 Jan 2025 08:21:57 +0530 Subject: [PATCH] Apply suggestions from code review Co-authored-by: Estelle Weyl --- files/en-us/web/css/_doublecolon_placeholder/index.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/_doublecolon_placeholder/index.md b/files/en-us/web/css/_doublecolon_placeholder/index.md index 36594c2f5835c11..6ed455ad0e8df6a 100644 --- a/files/en-us/web/css/_doublecolon_placeholder/index.md +++ b/files/en-us/web/css/_doublecolon_placeholder/index.md @@ -106,6 +106,7 @@ Some browsers make placeholder text less opaque. If you want fully opaque text, ```html + ``` #### CSS @@ -119,9 +120,11 @@ input { .explicit-color::placeholder { /* use the same color as input element to avoid the browser set default color */ color: currentColor; +} +.opacity-change::placeholder { /* less opaque text */ - /* color: color-mix(in srgb, currentColor 70%, transparent); */ + color: color-mix(in srgb, currentColor 70%, transparent); } ``` @@ -130,7 +133,7 @@ input { {{EmbedLiveSample("default_color", 200, 60)}} > [!NOTE] -> Note that browsers use different default colors for placeholder text. For example, Firefox uses the input element's color with 54% opacity, and Chrome uses `darkgray` color. If you want consistent placeholder text color across the browsers, then set the color explicitly. +> Note that browsers use different default colors for placeholder text. For example, Firefox uses the input element's color with 54% opacity, and Chrome uses `darkgray` color. If you want consistent placeholder text color across the browsers, then set the `color` explicitly. ## Specifications