gpt4 book ai didi

html - 为什么我在 html 表单上的输入字段的样式与 PureCSS 网站的样式不同?

转载 作者:行者123 更新时间:2023-11-28 13:10:45 25 4
gpt4 key购买 nike

我将 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com