CSS Border Color chrome/firefox-CodePudding

it's probably a absolute beginner question but I cant't find an answer in google.de.

If i give a border bottom color it appears a lot darker as i defined it. In safari mobile it appears as i had defined it. Is there a way to influence this behavior?

border-bottom-width: 4px;
border-bottom-color: #f00;
-webkit-appearance: none;

appearence HTML

CSS

HTML

CodePudding user response：

It seems that your problem lies in original Chrome/FF style for inputs - borders specifically. Just specify the border-style as solid and it should give you the desired output

.testinput { border: 10px solid greenyellow;
margin: 80px 100px; }

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <title>Titel</title> </head> <body> <input class="testinput"/> </body> </html>