Вернуть условное форматирование в html с внешним файлом .css

У меня есть html-файл, который запрашивает у пользователя информацию, вводя информацию в поле формы (например, имя, адрес электронной почты, возраст). Когда эти поля пусты, они должны быть выделены красной рамкой.

Если я помещу следующий код стиля css на html-страницу, подсветка сработает. Однако, если я сохраню его на внешней странице css, подсветка не будет работать.

Ниже работает, но второй набор не работает, когда он находится во внешнем файле css.

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style>
        input:invalid {
            border: 2px dashed red;
        }

        input:valid {
            border: 2px solid black;
        }
    </style>
</head>
<style>
    input:invalid {
        border: 2px dashed red;
    }

    input:valid {
        border: 2px solid black;
    }
</style>

Как мне заставить стиль работать из файла css, или это вообще возможно?

Либо вы меняете CSS, когда помещаете его во внешний файл, либо неправильно загружаете внешний файл. Проблема не в рабочем коде, который вы нам показали.

Quentin 22.05.2019 14:32

Могут быть Specificity проблемы

ShivCK 22.05.2019 14:32

Поделиться фрагментом HTML

Tenzin Chemi 22.05.2019 14:33
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
1
3
71
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Другой подход может состоять в том, чтобы добавить такие классы, как .valid и .invalid, в поля ввода при публикации, чтобы обозначить действительность полей. Это также позволит обойти любые проблемы со специфичностью, которые могут возникнуть у вас с вашим первоначальным подходом.

input.invalid {
    border: 2px dashed red;
}

input.valid {
    border: 2px solid black;
}
<input class="invalid" type="text" name="name" placeholder="Invalid" />
<input class="valid" type="text" name="name" placeholder="Valid" />

Другие вопросы по теме