How to make a enter button with a flat look?

Question

Here I have a submit button:

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

And I want to add some additional styles to make it flat:

 input { border: 0; background: none; -webkit-appearance: none; } 

Here's what it looks like later:

However, if you look carefully, there is still some border at the top of the submit button ... Is there a way to remove a sunken or raised surface and make it simple flat?

Answer 1

You will need to set the border, shadow box and background 0 / none to remove the gray color, as shown on the button. Then, to remove the rounded corners, set the border radius to 0px.

Rules:

 input[type="submit"] /* Or better yet try giving an ID or class if possible*/ { border: 0; background: none; box-shadow: none; border-radius: 0px; } 

Answer 2

I see that the corners of the buttons are rounded. Perhaps this is caused by other styles that affect him. Try removing border-radius as follows:

 input { border: 0; border-radius: 0; background: none; -webkit-appearance: none; } 

If this does not solve the problem, you need to check which style adds the upper bound. You can try using CSS !important with a border declaration (not recommended by the way):

 input { border: 0 !important; border-radius: 0; background: none; -webkit-appearance: none; } 

Answer 3

outline: none; will be my first guess.

And also, you probably want to remove the :focus and :hover state as such

 input[type="submit"]:focus { background:none; outline: none; border:none; } input[type="submit"]:hover { background: none; border: none; outline: none; box-shadow: none; } 

this makes it so that when it is pressed, it will not have a selected path.

if it does not work, try removing other styles, such as box-shadow:none; , border-radius:none; .

Answer 4

 input { border: 0 none hlsa(0,0%,0%,0); outline: 0 none hlsa(0,0%,0%,0); box-shadow: none; background: none; -webkit-appearance: none; } 

Even if outline not the default browser (AFAIK), in Bootstrap (if you use it or another simulation framework), outline is applied even if it is not displayed in a computed style. I'm still looking for this question. By the way, I did not add border-radius , because I believe that you may need rounded corners, and this should not be a problem.