Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Modifying a class on :focus ?

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #193404
    ChrisK
    Participant

    Hi!
    Before starting, I want too apologize for my approximative english… I’m french.

    As I was trying to design a cool contact form, I faced some troubles trying to achieve an effect. When my nameField is clicked (:focus), I would like the nameFieldLabel property to change to display:none.
    I was wondering if someone here could help.

    Here is the markup :

    ` <label for=”input-1″ class=”nameFieldLabel”>
    <span>Nom</span><br/>
    </label>

    &lt;input type="text" id="input-1" class="nameField" Placeholder="Je m'appelle..."/&gt;
    `

    And the CSS

    `body {
    background-color:crimson;
    }

    .nameField {
    width:200px;
    height:30px;
    border-bottom:solid 2px #CCC;
    border-top:solid 2px #CCC;
    border-left:none;
    border-right:none;
    background-color:transparent;
    transition:all 300ms ease;
    margin-top:10px;
    }

    .nameFieldLabel {
    font-family:sans-serif;
    font-weight:bold;
    font-size:18px;
    color:#ccc;
    }

    .nameField:focus {
    width:200px;
    height:40px;
    border-bottom:solid 2px #CCC;
    border-top:solid 2px #CCC;
    border-left:none;
    border-right:none;
    background-color:rgba(0,0,0,0.2);
    transform:translateY(-30px);
    outline:none;
    }

    /* maybe a hint… but doesn’t work
    .nameField:focus~ .nameFieldLabel {
    display:none;
    } */
    `

    If someone have an idea… Thanks in advance.

    Chris.

    #193415
    Paulie_D
    Moderator

    You can’t go UP the DOM with a CSS selector so given that your current structure has the input after the label means that you cannot affect it with :focus.

    If you can change the markup order you’d be OK otherwise you’d need javascript.

    #193418
    ChrisK
    Participant

    Thanks for the fast answer :)
    Well I can change the markup but in this case my label won’t be over the field anymore, right?
    So I lose the readability of my effect I guess.

    By the way, I was trying to do it only with CSS and no javascript.

    #193420
    Paulie_D
    Moderator

    Well I can change the markup but in this case my label won’t be over the field anymore, right?

    Well, you can position it differently in whatever manner you want.

    http://codepen.io/Paulie-D/pen/vExbyB

    #193422
    ChrisK
    Participant

    That’s exactly what I was trying to do. Thanks a lot. But in this case, I have to set every input and label position of the form. I have only 3 or 4 entries here so it will work just fine. But if you have like ten or more fields to display? (by the way, just wondering :))

    #193423
    Paulie_D
    Moderator

    To be honest, that’s why we use Javascript.

    You’re probably going to be using JS anyway so why not use if for the effects too?

    #193424
    ChrisK
    Participant

    For a simple reason : I’m a real dummy in javascript :)

    I am supposed to learn it but for now, I can’t do anything with it. I guess it’s a simple command, but I’m not sure how to use it.

    #193432
    Paulie_D
    Moderator

    Jquery is pretty easy to pick up although I’d imagine the pure Js would be pretty simple too.

    Perhaps a separate question over in the JS Jungle.

    #193434
    ChrisK
    Participant

    Maybe i’ll try this way. I just baught a book called CSS&Javacript. Maybe it’s time to start reading it :)
    By the way, thanks for your help !

    #193436
    ChrisK
    Participant

    Ho, just another question :
    do you know why the second instance is affected by the effect, and how to avoid it?

    http://codepen.io/chriskirsch/pen/PwpXBM

    #193437
    Paulie_D
    Moderator

    Because they share a common parent.

    You’d have to wrap each label + input set in a separate wrapper

    http://codepen.io/Paulie-D/pen/GgWeEM

    #193438
    ChrisK
    Participant

    Ok I see. It’s beginning to be clear now.
    Thanks again a lot for your help. it was really instructive!

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.