Change form style

bootstrap
#146

Hi
I am sorry for coming again, I made an experiment from youtube tutorial, I would like ask you to check the code if it is ok. any idea is greart, thank you, frank

this is what I followed on youtube
Transparent Login Form with floating Placeholder Text - Pure CSS Label Slide Up on Focus - No jQuery
I copied the form from w3schools bs3

#147

I forgot to ask, can I paste in bs3 modal? or I need some sort of adaptation. thank you, frank.

#148

I made some changing, added text area, but it is a bit difficult, doesn’t start right away like the other two fields on click. if I would like the gliphicons to stay, is there some clear:both or something similar, or I need a different approach with different code. thank you, frank

#149

Your label doesn’t seem to stay out of the way when data is entered and slides back on top of your data. There should be css using the :valid state of a ‘required’ input to keep the text away from the input data. As it stands its no use. As the :valid state has poor support you should probably use js to add a class instead to keep the text at the top.

Generally though these sliding placeholders are more trouble than they are worth and harm accessibility if not done perfectly.

I don’t see a difference.

Then you would need to only move the text itself. Wrap an element around the text only (maybe a ‘b’ element) and then just move the text.

e.g.

	.inputbox{
    	position:relative;
    }
	.inputbox label{
    	position:absolute;
        top:8px;
        left:12px;
        transition:0.5s;
    }
    .inputbox input:focus~label b{
    	position:absolute;
      top:-20px;
        left:-12px;
        background-color:white;
        color:#03a9f4;
      white-space:nowrap;
    }
	.inputbox textarea:focus~label b{
         top:-20px;
        left:-12px;
        background-color:white;
        color:#03a9f4;
      white-space:nowrap;
    }
  input.form-control{padding-left:40px;}

 <label for="email">
        <span class="glyphicon glyphicon-envelope"></span> 
        <b>Enter Email:</b> 
</label>

The padding-left is so that the input data does not get obscured by the glyphicon.

I haven’t looked at the documentation but if you are using bs3 then a bs3 modal should work ok as long as you follow the correct setup.

Don’t mix bs4 with bs3 as they are generally not compatible.

#150

Hi
thank you for help. following your instruction, I completed the suggested modifications, but from unknown reason, the floating part is frozen and the cursor is blinking before the glyph. I think I made some mistake, please help me with it, thank you. also I post my code snippet

  	<input type="email" class="form-control" id="email" placeholder="" name="email">
	<label for="email">
    <span class="glyphicon glyphicon-envelope"></span>
	<b>Enter Email : </b> </label>
</div>
#151

I forgot to ask, how to position the blinking cursor, to move it after glyph? thank you, frank

#152

The padding-left on the input should do that for you. I gave you the code for that.

The code I gave you replaced the css you had and if entered correctly would look like this on focus.

blink
blink.jpg740×175 21 KB

As I said the code you are using is not complete and you must have missed out something from your tutorial because as soon as you lose focus the label slides back over the input data.

(I’m offline now until tomorrow afternoon)

#153

Hi
this is the missing part
.inputbox input:valid~label b{}

#154

Hi
yes I would like to acchieve that , you just showed me. this is my css

.inputbox{
	position:relative;
}
.inputbox label {
	position:absolute;
    top:8px;
    left:12px;
    transition:0.5s;
}
.inputbox input:focus~label b,
.inputbox input:valid~label b{
	top:-20px;
    left:-12px;
    background-color:white;
    color:#03a9f4;
	white-space:nowrap;
}
.inputbox textarea:focus~label b,
.inputbox textarea:valid~label b{
	top:-20px;
    left:-12px;
    background-color:white;
    color:#03a9f4;
	white-space:nowrap;
}

thank you, frank

#155

somehoe my snippet is not like yours, it is hard to read.I am sorry, thank you

#156

Are you referring to the formatting of the code in your post?

How did you format the code in post #150?

Drag mouse over snippit to highlight the code.
In the editing window, click the </> button.

#157

Hi
Yes , first time was ok the second one was not formatted

#158

I forgot to post the html part of my problem

  	<input type="email" class="form-control" id="email" placeholder="" name="email" required>
	<label for="email">
    <span class="glyphicon glyphicon-envelope"></span>
	<b>Enter Email : </b> </label>
</div>
#159

Do you know how to edit a post? Click the pencil icon to edit post #154.

Drag mouse over snippit to highlight the code.
In the editing window, click the </> button.

Save the change.

#160

Yes it looks better, thank you, frank.

#161

Are you still having problems or are you now sorted?

If not fork or update your codepen with the new code you are testing so we can see what the problem is.

#162

Hi
thank you for helping me. unfortunately the code is not working, having a guess arround the <b> part. previously it was working even if it was faulty, now it is frozen, I think the be part needs more “envolvement”. I made another experiment also, i’ll post it after this one. thank you, please help me, frank

#163

sorry , I mean <b> part, it needs more involvement, just making some correction.

#164

Off Topic

To post code tags inline, you need to place a backtick ` before and after them: `<b>`

#165

thank you, I just mentioned an element of the code where I think the problem is. thank you, frank