Style Input fields with CSS - (4 examples)

for this video i'll be walking through how to style input fields to look like this using css alone with simple transitions and a lot of css tricks on styling in general let's get to it i have here a simple text input field with place order saying enter text and the fields i am about to show you will work with any alphanumeric input fields like email url and search fields on a css i have a simple default body style to center everything as you can see on the right and i'm a box sizing border box every element as well the input field is not a hard tag to stop it just has some limitation so i'll first remove its border and proceed to remove its appearance you remove the appearance whenever you don't want browser styling to interfere and don't forget to include the appearance prefix version as well for cross browser compatibility i'll give you the extra light gray background 12 pixels of batting around this corner by 3 pixels and make it 250 pixels wide which is a good width for fields notice when i click on it it gets a blue outline and this is chrome's way to indicate field focus and other browsers also do this on their own style but i don't want it so i'll go ahead and set out the line to none to get rid of it if i wanted to style the placeholder i could use the placeholder pseudo element and give it a dark gray color i can also hide it on focus by setting color transparent and give it a nice transition and this used to be my go-to field style when i started but for something more elaborated i'll first wrap the field in a label tag remove the placeholder attribute and create my own place order with a spam tag with a class of placeholder i also want to give the class of custom fill to the label i'll make a position relative so i can absolute position placeholder later give it 14 pixels of font size and i'll also do the same for the input field this will make sure that the font size of the field matches the placeholder i know some browsers change font size for fields so this will take care of it i'll give it 20 off top padding since i'll be moving the placeholder up and a nice 5 pixel margin bottom in case i want to add an error message after for example so it stays close but not too close to the field for the placeholder i'll position it absolute left 12 pixels to match the input fill padding so the text appears aligned 50 from the top and translate it up 50 as well but because the label has padding top i'll add 10 pixels to the 50 to make it perfectly center and then make it light gray when the input receives focus i'll use the adjacent selector combinator to grab the next element after in this case the placeholder and i'll move it up 10 pixels and reduce its font as well and make it extra dark gray color if i try this i get what i want but it needs a transition here so i'll transition top color and font size 0.3 seconds with easy easing and this is my go-to transition to start everything by the way with that it moves smoothly on focus but there is a problem if i type something and then click out the placeholder comes down because the field no longer has the focus because i want to make it purely css there is a trick to this i can make the field required and in addition to focus i'll keep the focus style when the field is valid using the valid state pseudo class as well and valid in this case means the field has value since it's required if your field is not a required field you will need javascript for this which if you stick to the end i'll show you as a bonus with that the first field is done three more to go for the second field i'll first copy this one and give it a class of one and i'll build it on top of it i'll first remove the background and give it two pixels gray border and when it gets focused or it's valid i'll change the border color again it needs a transition on the border color and it does not feel right so i'll add a delay so the bracelet color is much darker when the border starts to change i also want the play solo to move to on top of the line so on focus i'll make it say 20 pixels from the top and to solve the line through issue i'll give you the background same as the overall background in this case white with a padding left and right only to space it nicely and with that our second field is complete as you can see once you have the foundation every other change becomes easier to implement for the third field i'll duplicate this and change the class to two the first thing i'll do is remove its around corners and round only top and left right corners like this i want to give you the bottom border but i'll use the background for it so i'll set my linear gradient 90 degree which is the same as left to right add two light grays color stops and position positioning bottom left with a hundred percent width and two pixels height with no repeat notice that when i did that we lost the overall field background to fix that i'll add another linear gradient with a much lighter gray color stops and make it a hundred percent width and height and we get our background back the way background works is the first one you specify stays on top and that's why we get the line on top of the lighter gray background i'll add another gradient on top and give it a darker gray color stops but we'll make a zero width because this is what will change when the field receives focus on focus i'll simply change the background size comma separated and for the first one and the only one changing i'll make it 100 width and 2 pixels height and copy the other sizes over when i focus on the input field we see the border and again we need a transition magic i'll just transition the background size but it seems to grow from the left so i'll just change left to center over here and we get border expanding effect on focus super cool for the final example i'll again copy the field and change the class to 3 but this time i'll add a span of border class which i'll use to create the border drawing effect i'll temporarily set its background to red which is my javascript equivalent of console.log for css and i use it when i want to debug my css i'll make it 100 width and height position it absolute top left and we see it covers way more than the field and this is because the label has 20 pixels top padding so i'll reduce its height by 20 pixels and position it 20 pixels from the top so it just covers the input field i'll also match the rounded corner of the field i remove the background and give it a before pseudo element with almost same styling for now i'll make it red so we can see it and seems to do well for the fact i'll give this a bottom and right border and remove the background to illustrate the effect i want to create i'll slowly increment the width and notice the bottom border growing this is how i will make the border draw around the field by manipulating width and height of this to transition from 0 to 100 so on focus i'll select the border with the sibling instead of adjacent selector combinator to be able to grab the border and i'll make the width and height 100 with that i need to change its width and height here to zero as well as the border so i'll move the border down here instead seems like i forgot to add before pseudoelement and i am not using the right field class common consequences of copying and pasting code it seems also that we need that transition magic here here as well so i'll transition width and height and try again the effect is not quite there yet what i need to do is transition with then transition height to do that i'll copy the transition over for when the field has focus and set delay on the height of 0.3 seconds which is the duration the width takes to fully transition to 100 just like that we get our line drawing and all we gotta do now is repeat the same thing for the other two borders for that i'll add the after pseudo element and proceed to do a refactoring here so i don't duplicate css style give me just one second instead of bottom left we'll position the top right and make the borders top left it is best to group common styles for easy future changes and reduce your css size as well it is working but we see a different effect here so we just need to tweak few things first we need to start transition the width after the first two borders finish drawing and that takes 0.6 seconds since both sides take 0.3 seconds each it seems better now and for the height we need to wait 0.9 seconds because three borders now and each 0.3 seconds like that we get our border drawing but notice something here on the top right corner it seems to be the border width that does not have transition so i'll transition it to be the same delay as the width which is when the drawing starts and we don't need the duration here for it so i want it to just appear at full size it is much better now but also notice that when we lose focus everything just disappears and this is because the border goes back to zero immediately and we are now handling transition back to normal for width and height as well i'll first copy the transition to each pseudo element since they will be different for the before sudo element i want to transition the height back to zero only after top left is done so i have to wait 0.6 seconds and for the width i'll wait 0.9 seconds then for the border i'll wait for 0.9 for now for the after pseudo element i want no delay on the height since it will be the first to transition back then 0.3 seconds on the width and 0.6 on the border going back to the before so element the border needs to be 1.2 seconds to wait for everything before going back to zero now our effect is nice and smooth i don't know about you but this is a lot of values to keep track of and whenever you have something like this try to use variables to hold values that you can easily swap and apply changes to a complex css direction like this a great value scope to the custom input field and prefixing everything withdraw i have one for duration of 0.3 seconds one for the color of the border another for the border width and finally one for the easing function for the transition i'll first replace everywhere which transition or delay is 0.3 seconds and for the other values i'll use the calc function and multiply this duration accordingly to get my desired values before i change the others i'll first double check if everything still works fine i'll change the duration value to make the draw much faster nice i'll change the border colors now now the easing and i'm making linear which is a much natural drawing using uh looks good and finally the width which is just a single place now for the bonus i'll use javascript to handle cases where the field is not required but you want the state to stay when field loses focus and has a value i'll first query for all input fields for each i'll add a blur event listener to detect when field loses focus and all i do is check if value has length and add class of 30 otherwise remove the class 30. feel free to use whatever class you want a better one would be blurred or no focus and it seems i got a typo here and i'll just remove the length altogether now i can go ahead and replace the valley pseudo class here with dirty class and everything is all right like share and subscribe thanks for watching catch the next one [Music] bye [Music] you

Channel: Before Semicolon

Views: 25,116

Rating: 4.9408603 out of 5

Keywords: before semicolon, css, tricks and tips, web, web development, css effect, css trick, css how to, how to, web design, ui, ux, animation, css animation, transitions, css transitions, styling, accessibility, input field, text field, web components, vanilla javascript, vanilla js

Id: 3AK3vspZvvM

Length: 13min 16sec (796 seconds)

Published: Tue Sep 01 2020