Solved

Form Field Borders (Padding)

Posted on 2015-02-14
2
67 Views
Last Modified: 2015-02-15
See attached. I want to put a white border around the grey form field text areas.

Here is part of the html. I only added padding to a few of the fields to see if it works; it doesn't.

Name*: <input type="text" size="20" name="cname" style="color: #000; background-color : #efefef; padding: 5px;"><br>
                                                Address*: <input type="text" size="20" name="addr" style="color: #000; background-color : #efefef; padding: 5px;"><br>
                                                City*: <input type="text" size="10" name="city" style="color: #000; background-color : #efefef; padding: 5px;">, Zip*: <input type="text" size="5" name="zip" style="color: #000; background-color : #efefef; padding: 5px;" value="<? print $_POST['zip']; ?>"><br>
                                                Billing Address if different from Service Address:<br>
                                                Billing Address: <input type="text" size="20" name="baddr" style="color: #000; background-color : #efefef;"><br>
                                                Billing City: <input type="text" size="10" name="bcity" style="color: #000; background-color : #efefef;">, Billing Zip: <input type="text" size="5" name="bzip" style="color: #000; background-color : #efefef;"><br>
                                                Telephone*: <input type="text" size="10" name="phone" style="color: #000; background-color : #efefef;"><br>
                                                E-Mail*: <input type="text" size="30" name="email" style="color: #000; background-color : #efefef;"><br><br>
                                                Credit Card*: <input type="text" size="20" name="ccno" style="color: #000; background-color : #efefef;">
                                                Expiration Date*:&nbsp;Month:&nbsp;<select name="expmo" style="color: #000; background-color : #efefef; width: 50px;">

I am trying to use padding, but it doesn't work.

How can I do this?
payment-form.jpg
0
Comment
Question by:Richard Korts
  • 2
2 Comments
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40610659
Padding works inside an element. You want to use margins:

<input type="text" size="20" name="cname" style="color: #000; background-color : #efefef; margin: 5px;">
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 40610660
Alternatively, you could use the border:

<input type="text" size="20" name="cname" style="color: #000; background-color : #efefef; border: 1px solid white;">
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now