CODEWITHSUNDEEP
jquerycsshtml
Jayden Szekely
Jayden Szekely

Reputation: 23

Custom Input Styling

I'm wanting to make an input field like image 1 but currently am stuck with image 2's grey border... I have tried using outline: none, outline-width: 0 everything and I still can't get rid of the outline to do something like image 1... All help would be much appreciated!

Img 1 enter image description here

Img 2 enter image description here

Upvotes: 0

Views: 45

Answers (4)

Franklin Pious
Franklin Pious

Reputation: 3848

border:none

this might do the trick !

Upvotes: 0

Durgesh Dangi
Durgesh Dangi

Reputation: 213

input {
  border: none;
  border-bottom:1px solid #000;
  background-color: transparent;
  color:#000;
}
input:focus {

  outline:none;
}
<input type="text" placeholder="First Name">

Upvotes: 0

Zhenya Telegin
Zhenya Telegin

Reputation: 587

Try to use border: none and border-color: transparent

Sample 

input {
  border: none;
  border-color: transparent;
  background-color: #d1d1d1;
}
<input type="text" placeholder="Enter text here">

Upvotes: 1

KoalaGangsta
KoalaGangsta

Reputation: 556

To remove the border simply use the CSS property border:

border: 0;

Upvotes: 0

Related Questions