Why doesn't the button border get lighter than #f0f0f0?

135
January 01, 2020, at 11:00 PM

I want to show some buttons with a "faded" look if they are disabled. (Forget the disabled aspect for now; I'm just worried about the style.) But if I try to make the border-color lighter, it doesn't seem to work. Buttons c4 and c5 are supposed to have borders which are #f8f8f8 or #ffffff but they get darker. What's going on, and how can I fix this?

Chrome:

Firefox:

<html><head> 
<style type="text/css"> 
input[type=button].c1 { 
  border-color: #808080; 
} 
input[type=button].c2 { 
  border-color: #c0c0c0; 
} 
input[type=button].c3 { 
  border-color: #f0f0f0; 
} 
input[type=button].c4 { 
  border-color: #f8f8f8; 
} 
input[type=button].c5 { 
  border-color: #ffffff; 
} 
</style> 
</head> 
<body> 
<input type="button" value="plain"> 
<input type="button" value="c1" class="c1"> 
<input type="button" value="c2" class="c2"> 
<input type="button" value="c3" class="c3"> 
<input type="button" value="c4" class="c4"> 
<input type="button" value="c5" class="c5"> 
</body> 
</html>

Answer 1

By default border-style is inset in user agent stylesheet

You need to set border-style as well Like

input[type=button].c4 {
    border-color: #f8f8f8; 
    border-style: solid;
}

Or you can use

input[type=button]{border: 1px solid}

<html> 
 
<head> 
  <style type="text/css"> 
    input[type=button] { 
      border-style: solid; 
    } 
 
    input[type=button].c1 { 
      border-color: #808080; 
    } 
 
    input[type=button].c2 { 
      border-color: #c0c0c0; 
    } 
 
    input[type=button].c3 { 
      border-color: #f0f0f0; 
    } 
 
    input[type=button].c4 { 
      border-color: #f8f8f8; 
    } 
 
    input[type=button].c5 { 
      border-color: #ffffff; 
    } 
  </style> 
</head> 
 
<body> 
  <input type="button" value="plain"> 
  <input type="button" value="c1" class="c1"> 
  <input type="button" value="c2" class="c2"> 
  <input type="button" value="c3" class="c3"> 
  <input type="button" value="c4" class="c4"> 
  <input type="button" value="c5" class="c5"> 
</body> 
 
</html>

READ ALSO
CSS and height of the elements

CSS and height of the elements

How can I set the height of the div-s in my SPA app so that the following criteria will be met (black and red borders are just for the representation purposes):

123
break-before, break-after, and break-inside do nothing

break-before, break-after, and break-inside do nothing

I'm trying to keep an element from getting cut in half when I print the page, but for some reason the CSS properties break-before, break-inside, and break-after do absolutely nothingI've tried every combination of them I can think of on several elements...

106
Mix-Blend mode doesn&#39;t work on custom cursor

Mix-Blend mode doesn't work on custom cursor

I would like to add a mix-blend-mode: difference to the inner cursor, but I can't get it to workI heard that the position: fixed applied to the cursor may cause the problem here

232