我将 pure-css 添加到我的 html 模板中并制作了一个简单的表单。 我认为这个表单看起来和 PureCSS 网站上的一样。
虽然按钮样式很好，但表单上的输入元素是“原始的”。没有圆 Angular ，没有亮点。检查了两个浏览器。
包括来自 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>
最佳答案
基于此处的示例:http://purecss.io/forms/
您需要将表单的类设置为“纯表单”
<form class="pure-form">
<fieldset>
your inputs
</fieldset>
</form>
除了“纯形式”，您还可以添加:纯形式堆叠或纯形式对齐以获得不同的结果。我建议你好好看看上面的链接
编辑 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>
关于html - 为什么我在 html 表单上的输入字段的样式与 PureCSS 网站的样式不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19119340/