Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:11Length:1.4 hours
An introduction to styling html forms 400x277
  • Overview
  • Transcript

2.2 Working With the Appearance Property

In this lesson we’re going take the first steps towards achieving proper form styling by using a property called appearance.

Related Links

2.2 Working With the Appearance Property

Welcome back to the course. In this lesson, we're gonna take the first steps to proper form styling by using a property called appearance. So, let's check it out. Right here in code pane, I have a simple form with paragraphs being used to separate each form control. So starting from the top, we have a search input, a text input, a date picker, a radio button, a checkbox, an input type submit, an input type button and a button. Now, I made this collection of form elements here, so I can give you a wider range of examples. All right, so you can see how all of these are affected. Right here, I'm using Safari on MacOS. And Safari is a WebKit-based browser. Now here's how the same form looks like on Mozilla, which is Gecko based. So we have the search input. Notice, we have a difference already in WebKit. We have this little icon that allows us to reset the input or delete its contents. On Mozilla, we don't have that. Another difference is in the appearance of the inputs. Notice we have square corners here, but we have rounded corners here. On Mozilla, this date picker works. On Safari, It does not work. The radio buttons are relatively the same checkboxes. And the buttons are relatively the same. If we look at the same example in Chrome, we can see that again, the search input does have this button to delete the contents. The date picker works here but it is different from Mozilla. So here is on Mozilla, And here is on Chrome. And Chrome is also a WebKit browser but the date picker works here but not in Safari. And it does look different from the one in Firefox. Radio buttons, checkboxes, these look relatively the same and the input types or the buttons look relatively the same. So, as you can see, there are subtle differences between browsers. And I'm on MacOS but if we go to Windows and we check different browsers there, we're gonna find differences between those. And of course, the ones that I just showed you here on MacOS. So, there's a lot of differences, a lot of inconsistencies of how these form elements are rendered between browsers and between platforms. Now, this is happening because each browser has a different user agent style sheet. You can think about it like the internal CSS of the browser. And if we're gonna style these forms, we need to be as consistent as possible between browsers and platforms. And a very cool way to do that is by using a property called appearance. So it's super easy to use, you just open up your CSS file, you target input. Or whatever elements you want to normalize, let's say, and you would do appearance, and you would set that to none. And let's also add button to the mix, and there we go. Now, let's give this a save. Notice the appearance of these elements has changed. We can also see that the radio button and the checkbox controls have disappeared. The buttons have changed their appearance to this Windows 95 look, if you remember that. Let's also check that in Chrome. Hey, look at that, the inputs now look relatively the same, right? We don't have rounded corners anymore. We have this square kind of brute look to them, a radio button, checkbox, they're also gone. The buttons look different, Here, and let's check that in Firefox as well. We'll do a refresh and look at that, the inputs and the buttons look very similar now. So this is one step in the right direction. With this property, appearance, none, we're basically kind of resetting the styles and we prevent the browsers from applying their own user agent style sheet to to these elements. Now, there are also some vendor prefixes for this property and because I'm using CodePen, I have an autoprefixer applied here. So if I'm gonna check out the compiled CSS, you can see that we have two vendor prefixes. One for WebKit, one for Mozilla, and if you're not using an autoprefixer like me, you need to make sure you include these for the biggest support available. Now, talking about browser support for this property, it's pretty good. It works in WebKit, which means Chrome, Safari, Opera. It works in Gecko browsers, which means Firefox, and it also works in Microsoft Edge. It does not work in Internet Explorer. On can I use, I'm gonna say, Appearance, so CSS appearance. As you can see here, it has a pretty wide browser support. All right, and that's about it for the appearance property. Now, let's move on and learn about working with typography on form elements. I'll see you in the next lesson.

Back to the top