Shinji-san Shinji-san - 5 months ago 10
CSS Question

Styling submit button 'error'?

I am trying to style a submit button, but for some reason this is not working. I tried setting the height and it's not working. I got an example from W3 schools, styled it just the same and that's not working. Has anyone ever encountered a similar problem? Hopefully the following code is enough, but if it's not I can edit this post.

https://snag.gy/bpdTU8.jpg

Code:

<!-- Div that holds the form element -->
.mainBox {
padding-top: 15px;
margin: auto;
background-color:#998200;
width: 65%;
color: black;

}
input[type=submit] {
width: 50%;
height: 40px;
background-color: orange;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}


<input type="submit" value="Submit">

Answer

Inside of the input CSS, try adding display: block;. Like so:

input[type=submit] {
    display: block;
    width: 50%;
    height: 40px;
    background-color: orange;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

EDIT:

change display: block to display: inline-block

Hope this helps! :)

Comments