gr4nola gr4nola - 5 months ago 17
CSS Question

Bootstrap form input edges wont change from rounded to square

I am trying to make the corners for my form input square instead of rounded in bootstrap but am having no luck. The CSS worked for the button, but the input form is still rounded. What am I doing wrong here?

<form class="navbar-form pull-right">

<div class="form-group form-group-sm">

<input type="email" class="form-control input" id="email" name="email" placeholder="jane.doe@example.com">
</div>

<input type="submit" class="btn btn-sm" name="submit" value="Submit" id="submit"/>
</div>

</form>


css

.form-control {
border-radius: 0;
}

Answer

Your CSS rule isn't specific enough to override the Bootstrap CSS. Instead, just use :

#email {
    border-radius: 0;
} 

bootply example

To learn more about CSS specificity, see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Comments