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

StackOverflow https://stackoverflow.com/questions/19119340

  •  30-06-2022
  •  | 
  •  

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>
Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top