I added the pure-css to my html template and created a simple form. I expected it to look just like the form on the PureCSS website.
However, the buttons are nicely styled but the input elements in the form appear plain. No rounded corners or highlights. I checked on two different browsers.
Even after including the theme from the Skin Builder and adding my own pure-css-theme class, as well as trying to copy the 'blue-theme' from the Pure site, the input elements remained unstyled.
I couldn't find any other solutions in the pure-css site source code.
Why aren't the input elements being styled?
I must be missing something obvious here.
<!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>