CODEWITHSUNDEEP
htmlcss
themat
themat

Reputation: 23

Why is this CSS input border showing?

I have two different styles for input boxes, one is dark and the other is white.

https://jsfiddle.net/ttwjLynh/

On the dark one, there appears to be this ugly white boarder and I don't know where it is coming from.

enter image description here

How can I get rid of this white boarder? It does not appear on a white version and I don't know why it only appears when adding a background color.

(Check fiddle)

.black{
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    background-color: black;
    color: white;
}

.white{
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
}
<div id="bet-and-chance-input-boxes">
            <input class="black" value="text" autocomplete="off">
            <input readonly value="text" class="black" placeholder="" name="bet" autocomplete="off">
</div>

<div id="bet-and-chance-input-boxes">
            <input class="white" id="userbet"value="text" autocomplete="off">
            <input readonly class="white" value="text" placeholder="" name="" autocomplete="off">
</div>

Upvotes: 2

Views: 70

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157314

If you inspect the element, it shows that it uses border-style: inset; for the input box which is the default value set by the User Agent stylesheet.

enter image description here

So in-order to fix it, we need to override the border-style property for input. Hence, we set it to solid or you can set it as border: 1px solid red;, replace red with any desired color of yours.

Also make sure, that if you want to target input which are of type=text, then use a selector like

input[type=text] {
  /* override the defaults here*/
}


.black {
  padding: 12px 20px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  background-color: black;
  color: white;
  border-style: solid;
}

.white {
  padding: 12px 20px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
}
<div id="bet-and-chance-input-boxes">
  <input class="black" value="text" autocomplete="off">
  <input readonly value="text" class="black" placeholder="" name="bet" autocomplete="off">
</div>

<div id="bet-and-chance-input-boxes">
  <input class="white" id="userbet" value="text" autocomplete="off">
  <input readonly class="white" value="text" placeholder="" name="" autocomplete="off">
</div>

Upvotes: 3

Related Questions