Input field box, remove "background" color

Question

This is the image which shows my problem >> https://i.stack.imgur.com/MLJSa.jpg << Here's my html code:

.form-control {
    width: 600px;
    fill: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid grey;
    font-size: 18px;
    margin-bottom: 16px;
}

<form id="contactForm" method="POST" action="">
  <input name="fName" type="text" class="form-control" placeholder="What should I call you? Person X?" required>
  <br>
  <input name="email" type="email" class="form-control" placeholder="Only, if you want to be emailed back">
  <br>
</form>

Thank you for reading this ;)

It looks like there is styling applied when the input element is in a `focus` or `active` state. — Anthony, Jul 03 '18 at 15:13

Anthony · Accepted Answer · 2018-07-03T15:38:18.750

6

As I mentioned in a comment, it looks like a background is being set when the input is in a certain state. It looks like your using a framework and it is impossible to tell without the code used there, or a codepen/jsfiddle.

The css below will set the background to transparent when the input is in focus or active states.

.form-control:focus, .form-control:active {
    background: transparent;
}

Check out this question for information on input states.

edited Jul 03 '18 at 15:38

answered Jul 03 '18 at 15:15

Anthony

1,667
2
17
28

Thank you very much! Your solution has helped! I'm using Bootstrap(latest version), that's the only framework I'm using. (Or bootstrap isn't a framework, correct me if I'm wrong) Thank you again! :D – Adrian Jul 03 '18 at 18:45

score 0 · Answer 2 · answered Jul 03 '18 at 15:21

0

In css code instead you can add

background-color:transparent;

answered Jul 03 '18 at 15:21

Ragini Betrabet

24
4

No it doesn't work, sadly! Although thank you for your time and help :P – Adrian Jul 03 '18 at 18:47

score 0 · Answer 3 · answered Jul 03 '18 at 15:31

Try this

form{
  background: #000;
}
.form-control {
    width: 600px;
    fill: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid gray;
    font-size: 18px;
    margin-bottom: 16px;
}


input:focus {
    background-color: #fff;
    border: 2px solid #000;
    padding: 20px;
    border-radius: 10px;
}

<form id="contactForm" method="POST" action="">
  <input name="fName" type="text" class="form-control" placeholder="What should I call you? Person X?" required>
  <br>
  <input name="email" type="email" class="form-control" placeholder="Only, if you want to be emailed back">
  <br>
</form>

My problem has been fixed, thanks to Anthony, although coming back to your solution, it does not make a difference. Still same error, although thanks. — Adrian, Jul 03 '18 at 18:46

Input field box, remove "background" color

3 Answers3