Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Larg textboxes

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #30702
    shuma
    Member

    Does anybody know a tut for making giant textboxes with giant texts.
    Like twitter signUp textboxes: https://twitter.com/signup but bigger!!

    #76113
    jfreehill
    Member

    If you look at the structure their forms are fairly deep in HTML: https://skitch.com/jfreehill/rywtb/twitter-create-an-account#lightbox

    They are styling those boxes using CSS in two different style sheets, one that apparently they use on the whole site and one specifically for the signup page. twitter-https.css and signupflow-https.css respectively.

    The first only has one style (that I know of) that is used for all input elements on their site:

    input.text_field { border: 1px solid #ddd; font-size: 14px; padding: 8px; width: 200px; margin: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

    The second stylesheet incorporates many different styles for the form but for just the parts you’re talking about it uses these:

    #signup-form input.text_field:focus {
    border-color: #aaa;
    background-color: #fafafa;
    }
    #signup-form input.text_field {
    font-size: 18px;
    }

    So it’s all pretty much done with the text_field class. That should get you started but there’s dozens of tutorials for making nice looking forms that might not be as superfluous markup wise as Twitter’s signup form. Try smashingmagazine.com or I’m sure Chris has a nice tutorial up somewhere on CSS-Tricks.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.