- This topic is empty.
-
AuthorPosts
-
January 16, 2015 at 4:41 am #193404ChrisKParticipant
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><input type="text" id="input-1" class="nameField" Placeholder="Je m'appelle..."/>
`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.
January 16, 2015 at 4:55 am #193415Paulie_DMemberYou can’t go UP the DOM with a CSS selector so given that your current structure has the
input
after thelabel
means that you cannot affect it with:focus
.If you can change the markup order you’d be OK otherwise you’d need javascript.
January 16, 2015 at 5:32 am #193418ChrisKParticipantThanks 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.
January 16, 2015 at 5:59 am #193420Paulie_DMemberWell 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.
January 16, 2015 at 6:11 am #193422ChrisKParticipantThat’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 :))
January 16, 2015 at 7:01 am #193423Paulie_DMemberTo 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?
January 16, 2015 at 7:06 am #193424ChrisKParticipantFor 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.
January 16, 2015 at 8:09 am #193432Paulie_DMemberJquery 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.
January 16, 2015 at 8:14 am #193434ChrisKParticipantMaybe 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 !January 16, 2015 at 8:41 am #193436ChrisKParticipantHo, just another question :
do you know why the second instance is affected by the effect, and how to avoid it?January 16, 2015 at 8:55 am #193437Paulie_DMemberBecause they share a common parent.
You’d have to wrap each
label
+input
set in a separate wrapperJanuary 16, 2015 at 8:59 am #193438ChrisKParticipantOk I see. It’s beginning to be clear now.
Thanks again a lot for your help. it was really instructive! -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.