Получить браузер CSS Использует необходимые для HTML5

Question

Получить браузер CSS Использует необходимые для HTML5

0

В настоящее время я работаю над приложением, которое использует как теги html5, так и плагин проверки jquery, чтобы убедиться, что все поля заполнены до отправки формы. Я хотел бы, чтобы сообщения об ошибках выглядели одинаково, но я не знаю, с чего начать поиск стиля, который каждый браузер использует для обработки требуемого тега в html5. Есть ли способ захватить CSS, который браузер использует для требуемого тега? (Я мог бы просто жестко задавать класс.required, но мне хотелось бы, по крайней мере, найти стиль для одного браузера, потому что из того, что я видел, они все приятнее, чем то, что я знаю, как сделать!)

Благодарю!

iamthereplicant 04 дек. 2013, в 19:22

Источник

0

Я бы заглянул в инспектор / firebug объекта, чтобы увидеть, что происходит в атрибутах стиля, а затем создал инструкции CSS, которые копировали бы эти атрибуты для данного имени класса.
Frederik.L 04 дек. 2013, в 18:02
0

Я пытался сделать это перед публикацией, но отчасти проблема в том, что, как относительно новый разработчик, я не уверен, что я ищу здесь. Кроме того, я не видел никаких изменений в стиле элемента при использовании firebug, но я предполагаю, что это потому, что я пропускаю что-то очевидное.
iamthereplicant 04 дек. 2013, в 18:15

Теги:

jquery

html

css

html5

2 ответа

0

Из того, что я могу сказать, Chrome использует форму типа "callout". Это не совсем то же самое, но вы можете создать что-то похожее на этом сайте: http://csstooltip.com/

В Firefox вам нужно создать образец страницы, щелкнуть правой кнопкой мыши по элементу (поле ввода) и выбрать "Осмотреть элемент". После этого вы сможете щелкнуть вкладку "Вычисляемые стили" в правой части экрана, и вы можете установить флажок внизу, в котором говорится "Стиль браузера". Это покажет вам, что делает браузер.

Кстати, если вам нужен какой-нибудь тестовый код, который вы можете запустить очень легко, то следующее должно работать хорошо:

<html>
    <head><title>test</title></head>

    <body>
        <form name="input" action="#" method="get">
            <input type="text" required placeholder="example"/>
            <input type="text" required placeholder="example" />
            <input type="submit" value="submit" />
        <form>
    </body>
</html>

Удачи!

drew_w 04 дек. 2013, в 16:35

Ещё вопросы

Я бы заглянул в инспектор / firebug объекта, чтобы увидеть, что происходит в атрибутах стиля, а затем создал инструкции CSS, которые копировали бы эти атрибуты для данного имени класса.
Я пытался сделать это перед публикацией, но отчасти проблема в том, что, как относительно новый разработчик, я не уверен, что я ищу здесь. Кроме того, я не видел никаких изменений в стиле элемента при использовании firebug, но я предполагаю, что это потому, что я пропускаю что-то очевидное.

Fallup · Accepted Answer · 2013-12-04T16-05-00.000Z

Хорошо, вы можете попытаться захватить эти стили с помощью своего инспектора браузера (F12 в Chrome или правой кнопкой мыши → проверить элемент, но я не знаю, можете ли вы его настроить). Если вы новый разработчик, как вы сказали, вы можете найти плагин SnappySnippet Chrome очень удобным. Он позволяет отправлять стили последнего проверенного элемента (с инспектором) в CodePen или в JSFiddle.

В любом случае, если вы не можете настроить таргетинг на сообщение с помощью инспектора, вы можете найти стили по умолчанию для браузеров на основе webkit. Здесь просто выполните поиск ::-webkit-validation-bubble

@iamthereplicant Добро пожаловать. Если он ответил на ваш вопрос, подумайте над тем, чтобы проголосовать за этот ответ и принять его. См. StackOverflow IntroTour