In the case of the width you will have to tweak this for your specific form.Here’s the screenshot in Google Chrome if you just apply the rules above: However it may need some tweaking in terms of the width and/or line-height to make it consistent with your text boxes. You can apply most of the rules for text boxes to your SELECT drop-down boxes as well. Note: you may have to define your font-family for inputs and often the browser will use its own defaults if you don’t. We have used CSS Padding to make sure the text doesn’t hit the edges of our box and border-radius to give them a slightly rounded corner. Because we have used a comma list, we can apply the same rules to all items in the list. This format can be used to target any input type, including the new HTLM5 input for example. We could use CSS Classes, but we can be smarter than that:īy using the input we can target any HTML tag that has. So let’s apply some basic formatting to our text boxes. For example type="email" and type="url" are now valid ‘text’ boxes but do not allow the form to be processed until the correct format has been supplied (dependent on browser-support). Since the birth of HTML5, the number of single-line inputs has grown from just. So we are going to look at some simple CSS styles that can help bring a consistency to your forms and give you more control over your form design. And if your forms are dull, you could lose enquiries, sales, sign-ups or whatever your key conversion metric is.īut the reality is that without using CSS, your forms will look ugly! The problem is that forms, if not styled (or designed) are both boring to use and boring to look at. From enquiry forms, to email address captures, to your online banking, the need to enter information is the longest-standing method of adding user interaction to a website. Siri or OK Google) form are a necessary part of the web. Forms Are Necessary…but boring!ĭespite new technologies such as Social Media Sign-in and voice search (e.g. Okay with that out the way, let’s get started. Pre-requisite: if you are learning from scratch and haven’t yet learned HTML Forms, head over there first and then come back! This tutorial on how to style your forms using CSS will build on that tutorial (or previous knowledge).
0 Comments
Leave a Reply. |