HomeОбразованиеRelated VideosMore From: zFunx Web Developement Ideas

CSS - ( Part 2 : Adding Icon ) Simple Input Text Box

751 ratings | 86435 views
Code used : https://codepen.io/zFunx/pen/XRyqvx Part 1 : https://youtu.be/omJfspwjnZk Get started with Font Awesome : http://fontawesome.io/get-started/ Learn more about aria-hidden : http://csskarma.com/blog/difference-rolepresentation-aria-hiddentrue/ Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
Html code for embedding videos on your blog
Text Comments (68)
Vinicius Prado (20 days ago)
Great background song!!!!
Amr Elattar (1 month ago)
تسلم ايدك
Vito Diop (1 month ago)
Thank You
kawede ezechiel (1 month ago)
very good video, i really appreciated, cheer up
linuxero (1 month ago)
gracias !!!
tejas malani (2 months ago)
shut the background music
nabil jr (2 months ago)
same dessign but wirh textarea tag reply me by send source code
A I (3 months ago)
Thank you
anyta belkis (3 months ago)
Very helpfull. Thanks. I love it.
Ferenc Cziryek (3 months ago)
here is my code<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style>   input[type=text]{   width:100%;   border:2px solid #aaa;   border-radius:4px;   margin:8px 0;   outline:none;   padding:8px;   box-sizing:border-box;   tranition:.3s;  }  input[type=text]:focus{   border-color:dodgerBlue;   box-shadow:0 0 8px 0 dodgerBlue;  }    .inputWithicon input[type="text"]{   padding-left:40px;  }  .inputWithicon input {   position:relative;  }  .inputWithicon i {   position:absolute;   left:0;   top:8px;   padding:9px 8px;   color:#aaa;   tranition:.3s;  }  .inputWithicon input[type="text"] + i{   color:dodgerBlue;  }<!-- --> </style> </head> <body> <div class="inputWithicon"> <input type="text" placeholder="Your name"> <i class="fa fa-user-circle-o fa-lg fa-fw" aria-hidden="true"></i> <!-- --> </div> </body> </html>
Here's full code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <style> input[type="text"] { width: 100%; border: 2px solid #aaa; border-radius: 4px; margin: 8px 0; outline: none; padding: 8px; box-sizing: border-box; transition: 0.3s; } input[type="text"]:focus { border-color: dodgerBlue; box-shadow: 0 0 8px 0 dodgerBlue; } .inputWithicon input[type="text"] { padding-left: 40px; } .inputWithicon { position: relative; } .inputWithicon i { position: absolute; left: 0; top: 8px; padding: 9px 8px; color: #aaa; transition: 0.3s; } .inputWithicon input[type="text"]:focus + i { color: dodgerBlue; } </style> </head> <body> <div class="inputWithicon"> <input type="text" placeholder="Your name" /> <i class="fa fa-user-circle-o fa-lg fa-fw" aria-hidden="true"></i> <!-- --> </div> </body> </html>
1. replace .inputWithicon input { position:relative; } with .inputWithicon { position:relative; } 2. spelling of *transition* is wrong 3. replace .inputWithicon input[type="text"] + i{ color:dodgerBlue; } with .inputWithicon input[type="text"]:focus + i{ color:dodgerBlue; }
Ferenc Cziryek (3 months ago)
code not working properly, can you help me, thank you
Karishma Bhoir (3 months ago)
Useless coding
Jason Forman (4 months ago)
Great music! Is that the new Wiz Khalifa song?
Maybe similar to that
Mikkel Christensen (4 months ago)
Awesome mate, thanks again.
Expert Ortega (4 months ago)
Thanks, bro... but.... how would it be in the place of the input, a select?
Expert Ortega (4 months ago)
Nice..
I'll try that one someday
tan min fei (5 months ago)
Hi, NICE TUTORIAL ! you saved my life. but is it possible to do the same only for the placeholder of the select ? Please help me out. Thank you in advance.
You can check https://codepen.io/zFunx/pen/aygZaE . It's changing placeholder text color from blue to white.
Hendrikkrisma (6 months ago)
NIce video. Keep it up!!!
donald tux (6 months ago)
Your code works fine with input [text]. Please do you know how to do the same with a textarea?
donald tux (5 months ago)
thx it's a good solution. I' d just found the placeholder solution
*text-indent* can be used instead with *textarea*. I was trying to make: https://codepen.io/zFunx/pen/EOgROd
+donald tux Yes, icon will take the left space as we have used *padding-left*
donald tux (5 months ago)
an icon shrink the textarea field http://www.wubijacq.com/rwd/icone-input.php
You want icon in textarea?
Bilal Ibrahim (6 months ago)
Nice
sathesh kumar (7 months ago)
super
Hilder Irrazabal (7 months ago)
en que programa trabajas man
http://scratchpad.io
Rahul Chauhan (8 months ago)
thanks man. keep doing good work like this.
Johongir Rahimov (9 months ago)
But when input is vertically in the middle this hack is not working. Please could someone answer
You can try this https://codepen.io/zFunx/pen/eLoQBP Show me your code if you have any problem.
Shwibi Tech (7 months ago)
try using top: 50% - height of the element
Just do it ! (9 months ago)
Thank you !
التقني (9 months ago)
good
duc nguyentrung (10 months ago)
thanks bro
Chandrashekar Palle (11 months ago)
great..
Victor Silva (11 months ago)
Waw 😊
Paula Mourad (1 year ago)
Thanks!! And thanks for playing great music!!!! :)
H R DEVOLOPMENT (1 year ago)
but when i write .inputWithIcon input[type=text]{ focus:#1e90ff; } it doesn't focus,what to do??
Write like this : .inputWithIcon input[type=text]:focus{ color:#1e90ff; }
griffin fernando (1 year ago)
could someone tell me whats the title of the background music :) btw nice tutorial. useful <3
griffin fernando (1 year ago)
zFunx Web Developement Ideas thanks <3
eine kleine nachtmusik (by mozart)
Hridoy Mozumder (1 year ago)
Nice
Federicog08 (1 year ago)
i love you <3
TheForcepain (1 year ago)
this is not how you do that lol
Arpita Biswal (1 year ago)
I wrote the same code.But its not working.Can any body help...its urgent!!
Alibabas Kafé (1 year ago)
Arpita Biswal paste the code to a hastebin.com and put the link here
Can you show me your code?
Dmitriy Skachko (1 year ago)
Very helpful for beginners, thank you!
wow, that was really good. Interesting music choice.
Joshua Manansala (1 year ago)
Grandisimo!!
Joshua Yabao (1 year ago)
lol i like your music bg hahaha
oit pakistan (1 year ago)
great tutorial
Maaz Siddiqui (1 year ago)
Thanks.. Helpful video
5th droog (1 year ago)
thx for this video..was realy helpfull
Udaykumar Mabbu (1 year ago)
which software are used for this tutorial explination
http://scratchpad.io/ for coding and Windows Game DVR (on Windows 10) for recording
JaredS Pooley (1 year ago)
Never even crossed my mind to Use positioning to do it. Thanks buddy! :)
Narendra Subramanya (1 year ago)
Magnificently done and Informative video. Thanks mate.
AssamTech Talk (1 year ago)
nic video
Hernan Mancilla (1 year ago)
Great vid. Thx.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.