Почему мои поля ввода в html-форме не имеют такой же стиль, как веб-сайт PureCSS?

Question

Почему мои поля ввода в html-форме не имеют такой же стиль, как веб-сайт PureCSS?

0

Я включил pure-css в свой html-шаблон и сделал простую форму. Я думал, что эта форма будет выглядеть так же, как на сайте PureCSS.

Хотя кнопки красиво оформлены, входные элементы в форме являются "сырыми". Без округлых углов, без подсветки. Проверено на двух браузерах.

Включение темы из Skin Builder и добавление моего класса pure-css-theme не помогло и не срывало "синюю тему" с чистого сайта.

Невозможно найти что-либо другое в исходном сайте pure-css.

Почему элементы ввода не оформлены?

Я должен упустить что-то очевидное здесь.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
    </head>

<body>
<div>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

<form class="pure-form pure-form-aligned" action="{% url 'checkin' %}" method="post">
    {% csrf_token %}
    <fieldset>
        <legend> Your position </legend>
        <input type="textfield" name="latitude"  id="latitude"  placeholder="Latitude" /><br>
        <input type="textfield" name="longitude" id="longitude" placeholder="Longitude"/><br>
        <input type="textfield" name="accuracy"  id="accuracy"  placeholder="Accuracy" readonly><br>
    </fieldset>
    <fieldset>
        <button class="pure-button " type="submit">Send </button>
    </fieldset>

</form>

Jakub Głazik 01 окт. 2013, в 17:18

Источник

0

Вы добавили класс чистой формы в свою форму? Показ вашей разметки был бы полезен.
Barbara Laird 01 окт. 2013, в 14:51
0

Здесь явно не хватает вашего кода, чтобы мы могли на него посмотреть.
melancia 01 окт. 2013, в 14:52
0

Обновлено с примером.
Jakub Głazik 01 окт. 2013, в 14:56
0

Как указывает Густаво, правильная разметка: <input type="text" ... В HTML нет textfield типа: MDN , W3C .
Patrick M 01 окт. 2013, в 15:02

Показать ещё 2 комментария

Теги:

html

css

yui-pure-css

1 ответ

Ещё вопросы

Вы добавили класс чистой формы в свою форму? Показ вашей разметки был бы полезен.
Здесь явно не хватает вашего кода, чтобы мы могли на него посмотреть.
Как указывает Густаво, правильная разметка: <input type="text" ... В HTML нет textfield типа: MDN , W3C .

Gustavo · Accepted Answer · 2013-10-01T12-27-00.000Z

на примере: http://purecss.io/forms/

вам нужно установить класс формы как "чистую форму",

<form class="pure-form">
    <fieldset>
        your inputs
    </fieldset>
</form>

наряду с "чистой формой" вы можете добавить: выровненную по форме или сложную форму для разных результатов. Я рекомендую вам взглянуть на ссылку выше

Редактировать 1

Попробуйте с типом = 'text' вместо 'textfield'

<form class="pure-form pure-form-aligned" action="{% url 'checkin' %}" method="post">
    {% csrf_token %}
    <fieldset>
        <legend> Your position </legend>
        <input type="text" name="latitude"  id="latitude"  placeholder="Latitude" /><br>
        <input type="text" name="longitude" id="longitude" placeholder="Longitude"/><br>
        <input type="text" name="accuracy"  id="accuracy"  placeholder="Accuracy" readonly><br>
    </fieldset>
    <fieldset>
        <button class="pure-button " type="submit">Send </button>
    </fieldset>

</form>

Я добавил фрагмент кода, как вы можете видеть, я добавил класс в чистой форме.
Теперь я удивлюсь, почему я вообще использовал «текстовое поле». Спасибо, что заметили это. ;-)