1

我在我的 html 模板中包含了 pure-css 并制作了一个简单的表单。我认为这个表单看起来和 PureCSS 网站上的一样。

尽管按钮的样式很好，但表单上的输入元素是“原始的”。没有圆角，没有亮点。检查了两个浏览器。

包括来自 Skin Builder 的主题并添加我的 pure-css-theme 类并没有帮助，也没有从纯站点中删除“蓝色主题”。

在纯 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>
4

1 回答 1

2

基于此处的示例：http: //purecss.io/forms/

您需要将表单的类设置为“纯表单”

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

除了'pure-form'，您还可以添加：pure-form-stacked 或 pure-form-aligned 以获得不同的结果。我建议你好好看看上面的链接

编辑 1

尝试使用 type='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>
于 2013-10-01T14:52:38.490 回答