Why my input fields on html form are not styled the same as PureCSS website?

Question

I included pure-css to my html template and made a simple form. I thought that this form will look the same as on PureCSS site.

Although buttons are styled nicely, the input elements on form are 'raw'. No rounded corners, no highlight. Checked on two browsers.

Including theme from Skin Builder and adding my pure-css-theme class didn't help, nor ripping off 'blue-theme' from pure site.

Can't find anything other in pure-css site source..

Why input elements are not 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>

did you add the pure-form class to your form? Showing your markup would be helpful. — Barbara Laird, Oct 01 '13 at 14:51
What's obviously missing here is your code for us to have a look. — emerson.marini, Oct 01 '13 at 14:52

Gustavo · Accepted Answer · 2013-10-01T14:58:01.660

based on the example here: http://purecss.io/forms/

you need to set the class of the form as 'pure-form'

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

alongside 'pure-form' you can add: pure-form-stacked or pure-form-aligned for different results. I recommend you to take a good look at the link above

Edit 1

Try with type='text' instead of '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>

I added code snippet, as you can see I have added pure-form class. — Jakub Głazik, Oct 01 '13 at 14:57
I will now wonder why I used 'textfield' in the first place.. thank you for spotting that. ;-) — Jakub Głazik, Oct 01 '13 at 15:01

Why my input fields on html form are not styled the same as PureCSS website?

1 Answers1