8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

CSS Help Needed: Form Input Box

by WillR
6 replies
  • WEB DESIGN
    • |
I have a text input box in a form on my website where people enter their email address. I want to make the input box much larger though using CSS.

An example would be the sort of box found at: Enter your email address [Lang-8]

I have no trouble widening the length of the box but don't know how to increase the height and still have the text centered in the box vertically.

Any help appreciated.
#box #css #form #input #needed
  • Profile picture of the author Technista
    Originally Posted by WillR View Post

    I have no trouble widening the length of the box but don't know how to increase the height and still have the text centered in the box vertically.

    Any help appreciated.
    The designer used these setting for font size and box height:

    font-size:28px;
    height:40px;

    This combination centers the text vertically. As a test, I set a smaller text size while keeping the same box size, and the smaller text loses its center placement and rises to the top of the box.

    Your solution might be to use those sizes since we know they work, or scale them upwards or downwards to fit your design. For example, increasing both the font size and box size by 50% maintains your desired result.

    T
    Signature
    Atlanta Website Design
    {{ DiscussionBoard.errors[2279418].message }}
  • Profile picture of the author WillR
    Thanks for reply - it's appreciated. I have had a bit of a play around and have got something that works. My problem now is, I have a drop down box in the form as well and I cannot get the drop down and text box to look exactly the same sizes. Any ideas? If I get them looking close in IE then they are out in Safari or Firefox, and vice versa.
    Signature

    .


    .

    {{ DiscussionBoard.errors[2279569].message }}
  • Profile picture of the author Technista
    Can you provide a link to your form so I can take a look at it?
    Signature
    Atlanta Website Design
    {{ DiscussionBoard.errors[2279584].message }}
  • Profile picture of the author WillR
    I haven't got it online yet still playing around with it. Is this something you would know how to fix? If so, I'd be happy to pay you to do so....
    Signature

    .


    .

    {{ DiscussionBoard.errors[2279607].message }}
  • Profile picture of the author Technista
    I'll be happy to take a look at it.
    PM me.
    Signature
    Atlanta Website Design
    {{ DiscussionBoard.errors[2279637].message }}
  • Profile picture of the author sandeep Kumar
    You try that
    email address:<input type="text" name="email_address" style="font-size:12px" height="25" />
    here we use inline CSS Concept. you also use External CSS as well as Internal CSS.
    {{ DiscussionBoard.errors[2283529].message }}

Trending Topics