Maybe this example can help you reason about the styles and how they cascade. It looks like there is more to your template - and that you may be using a framework - so you likely need to override the styles provided by the theme or whatever you are using. To do that, you'll have to create a more specific selector. You can use the developer tools to see how complex the selector is currently... either create a more specific selector to override the styles... or amend the markup to have a cleaner set of classes to style with.
This is how I would approach a form.
https://jsfiddle.net/sheriffderek/at2m1r6v/
markup
<form action='' class='form-name'>
<ul class='field-list'>
<li class='field field-name'>
<label class='input-wrapper' for='input-id-1'>
<span class='label'>Label 1:</span>
<input class='input text' type='text' id='input-id-1' placeholder='...'/>
</label>
</li>
<li class='field field-name error'>
<label class='input-wrapper' for='input-id-2'>
<span class='label'>Label 2:</span>
<input class='input text' type='text' id='input-id-2' placeholder='...'/>
</label>
</li>
</ul>
<input class='submit' type='submit' />
</form>
styles
/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.field-list .field {
margin-bottom: 1rem;
}
.field {
border: 1px solid red;
max-width: 300px;
padding: .3rem;
}
.field .input-wrapper {
/* I would just write .input-w */
display: block; /* <label> is inline be default */
border: 1px solid blue;
/* click the label - to see how the input focuses */
padding: .3rem;
}
.input-wrapper .label, .input-wrapper .input {
display: block; /* both inline be default */
width: 100%;
border: 1px solid green;
}
.input-wrapper .label {
font-size: 13px;
margin-bottom: .3rem;
}
.input-wrapper .input.text {
font-size: 16px;
padding: .4rem .5rem;
}
.submit {
margin-top: 1rem;
}
.field.error {
background: rgba(255,0,0,.3);
}
<form:input ...>
- a framework? That would be important to know.