From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Form inputs offer a great opportunity to add some subtle and interesting effects to a web page. They are elements that your user will interact with at some point and making them fun to use can enhance the experience. We are used to the default form resembling its paper counterpart but in the digital world we can be more creative. Today we want to share some experimental styles and effects for text inputs with you. Andrej Radisic has done some great work on Dribbble, like the Jawbreaker input field, which we’ve based one of the effects on. Most of the effects use CSS transitions together with pseudo-elements.
Please note that this is for inspiration only and that we use CSS properties which only work in modern browsers.
For the markup we use a span as a wrapper for the input and its label. For the effects to work, we are putting the label after the input which usually should only be done when using checkboxes and radio inputs. This is not necessary if you rely entirely on dynamically adding a class that will trigger what we do on focus. For the purpose of this demo, we are going to rely on the CSS :focus pseudo-class as well to show its potential in combination with the adjacent sibling selector. But you can use a more semantic order together with the trigger class we also use in order to keep the inputs open that get filled (and can’t be closed due to the label position). Note that not all effects have the trigger class (input–filled) defined in the CSS.
<span class="input input--haruki"> <input class="input__field input__field--haruki" type="text" id="input-1" /> <label class="input__label input__label--haruki" for="input-1"> <span class="input__label-content input__label-content--haruki">First Name</span> </label> </span>
The label is our powerful element here. We can use the pseudo-classes :before and :after for defining ornaments like borders and backgrounds that we can then move around and play with — ideally only using the properties that we can animate cheaply. We can even create an overlay like we do in the effect called “Kyo”:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The first effect, “Haruki”, might look like as if we animate the height of something that has borders, but we actually animate the two pseudo elements of the label, each resembling a border (vendor-prefixed properties left out):
.input--haruki { margin: 4em 1em 1em; } .input__field--haruki { padding: 0.4em 0.25em; width: 100%; background: transparent; color: #AFB5BB; font-size: 1.55em; } .input__label--haruki { position: absolute; width: 100%; text-align: left; pointer-events: none; } .input__label-content--haruki { transition: transform 0.3s; } .input__label--haruki::before, .input__label--haruki::after { content: ''; position: absolute; left: 0; z-index: -1; width: 100%; height: 4px; background: #6a7989; transition: transform 0.3s; } .input__label--haruki::before { top: 0; } .input__label--haruki::after { bottom: 0; } .input__field--haruki:focus + .input__label--haruki .input__label-content--haruki, .input--filled .input__label-content--haruki { transform: translate3d(0, -90%, 0); } .input__field--haruki:focus + .input__label--haruki::before, .input--filled .input__label--haruki::before { transform: translate3d(0, -0.5em, 0); } .input__field--haruki:focus + .input__label--haruki::after, .input--filled .input__label--haruki::after { transform: translate3d(0, 0.5em, 0); }
Note that we have some default styles defined initially for the input wrapper, the input and its label.
The label is on top of the input and when focusing the input, we will animate its content span up while translating the two pseudo elements up and down.
In Firefox (on Mac) the text-rendering is not very nice so you might see some “crisping up” of blurred text in the end of transitions. But blurry text is not only an issue on Firefox. It’s really sad that fonts don’t render nicely in Chrome either when something is transitioned. Some font-sizes work well when for example, scaling an element, but then others don’t.
Note that the SVG stroke animation of effect “Madoka” does not work in Internet Explorer (we are using a transition on the stroke-dashoffset).When you do your own effects, keep in mind that animating the text input itself might be a bad idea due to some bugs on iOS and Internet Explorer (the cursor of the input won’t move until you actually type).
We hope you enjoyed these effects and get inspired!
love the effects! and the akira references π I love the names you guys come up with for your effects π
Really cool text input effect π
Very cool effects, Mary.
Really cool effects but , i miss the effect when a required field is not filled in
wow ! very nice, thank you Mary Lou.
Very nice. Thanks Mary Lou!
Great thing! I was looking for something just like that π
You have outdone yourself, I didn’t think that was possible.
Thank you so much! π
Names and all of the effects, everything is awesome. You did a fantastic stuff. Thanks!
Wow!! Great!
This is what exactly I’m looking for… Thank you Mary….
really awesome
very nice post. Thanks
Thanks Mary Lou! Always look forward to your articles / tutorials.
Really awesome n creative..love to see that text input can also look so unique…
Dear Mary Lou,
You are an inspiration. Thank you for sharing your ideas with the world. Cheers, Merlin
Damn love it π
Really impressive , thank you for sharing.
in my monitor some inputs are almost invisible.
HEY! you are using BEM too!
Awesome input effect. I will very soon use it fory URL Shortener.
Thanks π
Do you think when input fields are not clearly visible such as in boxes like at Ichiro, would an untrained user be little confused to find those? Lovely ideas for inspiration, thank you for sharing!
Simple, creative and nice text input effects!
Can be use for the select options too
These are great…just as we have come to expect from you ML…especially like Madoka.
Simply but too much attractive
i am a VB.NET & C#.NET Developer and i want to know if i can convert this into tools of my VB or C# project any one can help me please.
The “Ichiro” fields don’t seem to stay open when they get filled out when I try to use them. Any thoughts?
I have the same issue, did you ever figure it out?
None of the fields stay open for me :/
For anyone else encountering this issue, I just figured it out. Firstly, make sure you include classie.js in the footer of your page.
Finally, they put a little sneaky bit of javascript on their demo page, that doesn’t seem to be documented. Add this to your page and voila – they stay open.
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, ”);
};
})();
}
[].slice.call( document.querySelectorAll( ‘input.input__field’ ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== ” ) {
classie.add( inputEl.parentNode, ‘input–filled’ );
}
// events:
inputEl.addEventListener( ‘focus’, onInputFocus );
inputEl.addEventListener( ‘blur’, onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, ‘input–filled’ );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === ” ) {
classie.remove( ev.target.parentNode, ‘input–filled’ );
}
}
})();
has the solution provided by Luke below worked for anyone? :O
just love this one <3
Why Barbara? I’m curious becouse it was very popular (a specialy in Silesia) female name in Poland, with is my country.
In other countries they have Barbaras too, you know…
I am trying to use these forms, but for some reason the span classes do not toggle to “filled” once the input field has text in it. Any reason why? I am using all of the css sheets in the source (except for the demo.css) and I included the.js file.
Hey Manoela Ilic this is great work .
very simple and creative , i only have one question related to the demo “kuro” , why does the label content text get blury on focus
amazing and simple work !
I love what you did here, I tool the liberty to implement them for iOS using Swift https://github.com/raulriera/TextFieldEffects hope that you don’t mind π
Hi there! I’m intrigued with names you use in your classes. For instance, why you use ‘__’ and ‘–‘ sometimes? Sorry if it is too obvious, I’m learning π
Thank you, and keep the awesome work!
It’s the Block, Element, Modifier methodology (BEM). http://getbem.com/
very interesting
While these input boxes are nice, they are also confusing for the user.
Very cool Input effects.
It would be perfect if it could be used for textareas too.
It doesn’t seem to work when I copy the js and css for textareas. Did anyone successfully try them?
Oh never mind. It does work with textareas!
How did you made it work for Textarea?
Just add “textarea.input__field” to your query selector, shown below:
[].slice.call( document.querySelectorAll( ‘input.input__field, textarea.input__field’ ) ).forEach( function( inputEl ) {
Hey, I have the following issue when I type something in the input field , it does not appear in safari. Does anyone know how I can fix this issue ?
Nice text box effacts
Absolutely amazing work once again. Thank you so much for sharing π
A bug in chrome : you need to add something like: height: 3.5em to .graphic–nao to be able to see the line.
Anyway thanks Mary Lou for the code, it’s amazing !
Absolutely sleek and cool. Good job! (y)
wow
I am trying to apply the effect of chisato in a textarea but I can not, the label falls into the textarea to lose focus, could help me?
Wow. Amazing
nice, good thaks for sharing
Wow great code skills you got, wonderful was actually browsing around the internet and came across such beauty on your code. Impressed <3
awesome work Mary Lou.
can you tell me how can i validate ruri effect textbox using jquery validation http://jqueryvalidation.org/ ?