Псевдокласс, показанный заполнителем, похоже, не работает в Safari ⇐ CSS

[Anonymous]

Когда я использую :not(::placeholder-shown), кажется, что :NOT не работает в браузерах Safari.
Если вы не используете Safari: ниже я добавил способ использовать браузер Safari с драматургом, чтобы вы могли протестировать его самостоятельно.
app.js

Код: Выделить всё

Form Validation Example

input:not(:placeholder-shown):invalid {
border-color: crimson;
}





Submit


`

Используйте Playwright для имитации Safari:

Код: Выделить всё

const { webkit } = require('playwright');

(async () => {
const browser = await webkit.launch({ headless: false }); // Launch Safari in non-headless mode
const context = await browser.newContext(); // Create a new browser context
const page = await context.newPage(); // Open a new page

// Set HTML content
const content = `



Form Validation Example

input:not(:placeholder-shown):invalid {
border-color: crimson;
}





Submit


`;

await page.setContent(content); // Load the HTML content in the page
})();

• npm init -y
• npm install playwright
• node app. js

Подробнее здесь: https://stackoverflow.com/questions/783 ... -on-safari