Form Different Colours when Clicked

Question

I created a form for a footer that when you click on an input, the text and border-bottom transition from grey to white.

Code Pen

HTML:

<div class="footer">

<div class="footerContainer">

    <form>

        <input type="text" class="name" placeholder="Name"/>

        <input type="text" class="subject" placeholder="Subject"/>

        <input type="tel" class="phone" placeholder="Phone Number"/>

        <textarea type="text" class="details" placeholder="Details"></textarea>

        <input type="submit" class="submit" placeholder="Submit"/>

    </form>

</div>

CSS:

.footer{
height: 100%;
width: 100%;
background-color: grey;
display: flex;
justify-content: center;
align-items: center;
}

.footerContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkgrey;
    width: 25%;
    padding: 2vw;
    margin: 2vw;
}

.name, .subject, .phone{
    background-color: transparent;
    border: 0;
    border-bottom: solid #bababa 1px;
    height: 2.8vw;
    font-size: 2vw;
    color: #bababa;
    transition: color linear 0.5s;
    margin-bottom: 1vw;
    font-family: 'Lora', sans-serif;
    width: 100%;
}

textarea{
    background-color: transparent;
    border: 0;
    border-bottom: solid #bababa 1px;
    height: 10vw;
    font-size: 2vw;
    color: #bababa;
    transition: color linear 0.5s;
    margin-bottom: 1vw;
    font-family: 'Lora', sans-serif;
    resize: none;
    width: 100%;
}

.submit{
    float: right;
    border: 1px solid black;
    border-radius: 0.4vw;
    height: 2vw;
    width: 4.5vw;
    font-size: 1vw;
    background-color: #92F398;
    cursor: pointer;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
    color: #bababa;
    transition: color linear 0.5s;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{
    color: white;
    transition: color linear 0.5s;
}

input:focus, textarea:focus{
    color: white;
    border-bottom: solid white 1px;
    transition: color linear 0.5s;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

What I'd like to achieve is when the user has input something into the form and they click off of it, the text imputed will remain white (which it does not do).

Sorry if this post doesn't completely follow the rules, there are so many. I tried to format this as best as possible.

Have you tried this: `.name, .subject, .phone,textarea{ color: #fff; }` — Sonny Tambiac, Mar 17 '17 at 01:10
Possible duplicate of [Matching an empty input box using CSS](http://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css) — haxxxton, Mar 17 '17 at 01:22

score 0 · Accepted Answer · answered Mar 17 '17 at 01:24

0

You can use trick like:

input:valid{
  color: white;
}

Add this css, all valid input will have white text color.

Furthermore you can add minlength="4" to input add can decide when input should change color.

Try write something and see.

Here you are codepen

answered Mar 17 '17 at 01:24

Dawid Karasiewicz

144
5

It worked thanks. However, what does the 'valid' thing mean? – Duko Mar 17 '17 at 02:42
The :valid selector selects form elements with a value that validates according to the element's settings. – Dawid Karasiewicz Mar 17 '17 at 02:51

Form Different Colours when Clicked

1 Answers1