CODEWITHSUNDEEP
cssbuttoninput
arrowman
arrowman

Reputation: 426

Input button remove "shadow"

I can't remove grey "shadow" effect from input type button on half of it:

enter image description here

I checked all methods on forum but:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
outline: white;

doesn't work...

Excample:

.background {
  background-color: lightgrey;
  width: 400px;
  height: 300px;
}

.button {
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: black;
  border-radius: 50%;
  border-width: 2px;
  border-color: white;
  width: 25px;
  height: 25px;
  color: white;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: white;
}

.box {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: white;
  width: 200px;
  height: 100px;
}
<div class="background">
<div class="box">
</div>
<input type="button" class="button" value="x">
</div>

Forum posting system force me to write something more because I have many codelines in post. But I don't know what can I write more? Everthing is on image and in code above. So I write what this forum doesn't like: "Thanks at all :-)"

Upvotes: 2

Views: 5880

Answers (2)

reiallenramos
reiallenramos

Reputation: 1295

change yourborder-color to transparent to remove any color, and will cause your border to take the color of the background due to border-width attribute

.button {
  background-color: black;
  border-radius: 50%;
  border-width: 2px;
  border-color: transparent; /* NEW */
}

Upvotes: 0

Xecuter34
Xecuter34

Reputation: 149

It is because of the border-style in the input type="button".

The reason you have that grey shadow is because it is set to 'outset', change this to solid for it to remove it :)

.button {
   background-color: black;
   border-radius: 50%;
   border-width: 2px;
   border-color: white;
   border-style: solid;
}

Upvotes: 6

Related Questions