Transcript from the "CSS as the Solution" Lesson
>> Estelle Weyl: And then there is sometimes where CSS you have a problem and CSS is actually a solution instead of using frameworks, so I came up with two things. I had a designer who really didn't want the placeholder to be gray and he wanted it to stay when the user was typing in code.
[00:00:22] So here if I type in the 5, the month, so May 44, right? You saw here that the Y was still there and the Y is pink but I could change it and make it green, right? Right now it's one pixel too high but I can fix that.
[00:00:45] So I had this requirement to figure out how to make it so the placeholder was a different color so that it was a mask, it was input masking so that when the user was entering data, they always saw it and I thought how can I do this. I can either use jquery with the input mask framework, which keeps it the same color, but at least makes input mask black, cuz it's actually the value, or I could come up with a solution.
[00:01:15] So my solution was to create a span that is behind the input. So making the input transparent, put a span behind it that says MM/YY. And when they fill in the first character, that first M goes transparent. When they fill in the second character, that second M, it's still there as the number 5 but it is transparent.
[00:03:25] And the css is basically shell span color green, which you can change
>> Estelle Weyl: The I is transparent. And.
>> Estelle Weyl: It's kind of it.
>> Estelle Weyl: There's a GitHub Repo right here if you wanna take a look. There's a few more lines of CSS and for some reason I did not include it in this little thing.
[00:03:56] Let's click on the GitHub Repo, open in a new tab, and take a look.
>> Estelle Weyl: The CSS
>> Estelle Weyl: The input that's masked, the important part is that it's transparent, that's the only feature that is monospace and transparent. That's really the only thing that's different. The shell span I is transparent or has an opacity of zero or its visibility hidden.
[00:04:43] Anyone of these three will work and that's the feature. So I put it exactly in the same location, because the span is actually positioned absolutely with in that parent. So I put this behind the input. If I had it put in front of the input, because they wanted a background color on the input, which is doable, all I would have had to do is put pointer events none on the span.
[00:05:12] And the pointer events known is actually a feature. We're gonna talk about it in, like, two minutes. So another feature that I wanted to do was to create an accessible carousel without java script. There is three lines of java script in this carousel. Right here, you can barely see it, but the second.
[00:05:36] Circle was selected. I'm gonna click on the right arrow.
[00:06:08] And then I transition left and right, based on that click. So HTML for this is field set and then a legend. So to the screen, we're actually saying, select an address to edit and then I have a label for my address and then I have an input type radio that has see label for address1 and this is id address1 and it's checked.
[00:06:40] And then the next one gets checked and all that happens is the class. Up here of left0 goes from left0, left1, left2, left3, left4 or however many there are and that's it. All I'm doing is transitioning the left property.