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

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

501 ratings | 57554 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 (46)
tan min fei (8 days 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 (21 days ago)
NIce video. Keep it up!!!
Jacques le kernec (25 days ago)
Your code works fine with input [text]. Please do you know how to do the same with a textarea?
*text-indent* can be used instead with *textarea*. I was trying to make: https://codepen.io/zFunx/pen/EOgROd
+Jacques le kernec Yes, icon will take the left space as we have used *padding-left*
Jacques le kernec (5 days ago)
an icon shrink the textarea field http://www.wubijacq.com/rwd/icone-input.php
You want icon in textarea?
Bilal Ibrahim (26 days ago)
sathesh kumar (1 month ago)
Hilder Irrazabal (2 months ago)
en que programa trabajas man
Rahul Chauhan (3 months ago)
thanks man. keep doing good work like this.
Johongir Rahimov (3 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 Shrabs (2 months ago)
try using top: 50% - height of the element
Just do it ! (3 months ago)
Thank you !
التقني بحت (4 months ago)
duc nguyentrung (4 months ago)
thanks bro
Chandrashekar Palle (6 months ago)
Victor Silva (6 months ago)
Waw 😊
Paula Mourad (6 months ago)
Thanks!! And thanks for playing great music!!!! :)
H R DEVOLOPMENT (7 months 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 (7 months ago)
could someone tell me whats the title of the background music :) btw nice tutorial. useful <3
griffin fernando (7 months ago)
zFunx Web Developement Ideas thanks <3
eine kleine nachtmusik (by mozart)
droid ans (7 months ago)
Fenix Fiestas (8 months ago)
i love you <3
TheForcepain (9 months ago)
this is not how you do that lol
Arpita Biswal (9 months ago)
I wrote the same code.But its not working.Can any body help...its urgent!!
Alibabas Kafé (9 months ago)
Arpita Biswal paste the code to a hastebin.com and put the link here
Can you show me your code?
Dmitriy Skachko (10 months ago)
Very helpful for beginners, thank you!
Konrad Dariusz Woloszyn (11 months ago)
wow, that was really good. Interesting music choice.
Joshua Manansala (11 months ago)
Joshua Yabao (11 months ago)
lol i like your music bg hahaha
oit pakistan (11 months 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.