Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    [p]Most of us will eventually want to style an <input type="text"> sometime in our life.[/p]
    [p] It's not too hard.[/p]
    [importantbox=Before You Begin][h2]Don't know CSS?[/h2]You need to know CSS to complete this tutorial. It's a good idea to learn from one of these sites (and of course, WDF is a good place for help):
    http://www.cssbasics.com/
    http://www.w3schools.com/css/
    [h2]Even if you know CSS[/h2]...it's a good idea to brush up on its layout and positioning module; I love the tutorial on BrainJar.
    [/importantbox]

    [h1]Begin Here[/h1]
    [p] First, know that every input element (even hidden ones, so be careful) is styleable with CSS.[/p]
    [p] So set all of the following, if you set any (a good practice for all styles, as it avoids nasty clashes with user-agent defaults):[/p]
    • [minicode]color[/minicode]
    • [minicode]background[/minicode]
    • [minicode]border[/minicode] (width, style, color)
    [importantbox=Internet Explorer Caveat]Beware of IE's weird horizontal tiling/scrolling of backgrounds when a user types enough to make the text "scroll" inside the box. This may force you to use The Tricky Method.[/importantbox]
    [h1]Going Further: The Tricky Method[/h1][p]Sometimes, that's not good enough. For example, maybe you want to do something like this (see the search box).[/p]
    [p] The following steps are tested to work in Firefox 1.5, IE6, and Opera8. Update: And also in FF3, Opera 9, and Safari 3. I didn't check IE7/8 yet but assume it works fine.[/p]
    1. Style a containing block, <div> or <form> will do fine, to have [minicode]position: relative[/minicode]This will enable you to position things pixel-perfectly inside it.
    2. Use an image tag and an <input type="text" /> tag. The image tag should come first in your code. Give them both widths and heights; the input element should be perhaps just a wee bit smaller.
    3. Style them both to be [minicode]position: absolute;[/minicode]
    4. Give the input element this style:
      Code:
      input.yourSpecialInput {
        color: black /*or your color*/;
        background: transparent none;
        border-width: 0;
      }
    5. Use two of: [minicode]top:[/minicode], [minicode]bottom:[/minicode], [minicode]left:[/minicode], [minicode]right:[/minicode] for both the image and the input elements (usually the same for both). The input element should be on top of the image.
    6. Mess with padding in the input box until it's just right. (If you're not sure, ask the little bear; he was last seen sleeping in Goldilocks' bed.)
    [h1]A Final, Important Caveat[/h1]
    [importantbox=Browser Compatibility]Always be aware that not all browsers allow the styling of input elements. For example, Safari 1.0–2.0 only allows [minicode]opacity:[/minicode] styling on form controls—not [minicode]color:[/minicode], [minicode]background:[/minicode], or [minicode]border:[/minicode]. (Update: Safari 3 allows the background to be completely clear.) Try to make sure your code degrades nicely for browsers that don't like your styles, and check your pages in as many browsers as is reasonably possible. Browsercam can help (and they have a one-day free trial).[/importantbox]
    [h1]What about search boxes?[/h1]
    [p]Update: I'd like to share a really useful link for styling search boxes, especially in Safari and/or if you want it to look like the Mac OS X style search boxes: http://www.brandspankingnew.net/arch...g_an_os_x.html[/p]
    [h2]That's all, folks[/h2]
    [p] Enjoy![/p]
    [p] If I forgot something, please comment and I will edit the tutorial.[/p]
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  2.  

  3. #2
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    cool tutorial..
    one question though..

    is it possible to style a combo drop down box?

    I always want to style my input fields but always end up just using the standard look because I can never get drop downs to style at all...

  4. #3
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Quote Originally Posted by igeek
    cool tutorial..
    one question though..

    is it possible to style a combo drop down box?

    I always want to style my input fields but always end up just using the standard look because I can never get drop downs to style at all...
    AFAIK there is no combo box in HTML, as a combo drop-down list allows the user to type their own entry or select one in a single field.

    As for select boxes (or drop-down lists, the other common name for them) -- I did a quick test in FF1.5 and IE6:
    FF and IE allow font, color, background color changes in <select> lists
    FF allows borders to be changed and transparent backgrounds
    Neither permits background images
    Neither permits styling of the button AFAIK
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  5. #4
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    And you can forget about styling a damn thing in Safari when it relates to form fields and elements. Aqua always takes priority.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  6. #5
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Filburt1 (or anyone), I'd be interested in a screenshot of the page I linked to from the tutorial as seen in Safari! Hopefully it degrades OK...
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  7. #6
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    @igeek
    Remember, you can always go the hard route and use some JavaScript to fake a select box. I would go the route of using a standard <select> element, but then using JS to replace it with
    (a) an <input type="hidden" /> replacement,
    (b) the visual, styled HTML replacement for the dropdown box, and
    (c) scripting that captures selections from the pseudo-select-box and updates the hidden input field

    That way it should work whether or not the user has JS installed/enabled.

    For an example of this type of thing, though IDK whether they use a script like the one I described, is on Digg.com, when you see a story's page and it has the "problem?" pseudo-option-box.
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  8. #7
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Quote Originally Posted by straight_up
    Filburt1 (or anyone), I'd be interested in a screenshot of the page I linked to from the tutorial as seen in Safari! Hopefully it degrades OK...
    Sorry, requires me to boot up the old G4 Cube (plus install 10.4.5 on it) as well as go through hoops to convert the screenshot appropriately.

    Primary computer is a PC (Windows XP).
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  9. #8
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Interestingly, no, Safari doesn't allow these sort of tricks... yet it allowed me to set the opacity using the CSS [minicode]opacity:[/minicode] property...
    5113191.png is the Safari 2 screenshot.

    Konqueror also doesn't allow styling, apparently, but at least in this case, the textbox and search form still looks pretty good!

    Also visible here ([deleted]not in Safari, of course[/deleted] [inserted]Holy crap, batman, just look at that Safari 1.2 screenshot as well as IE; the PNG is way too dark[/inserted]) is the PNG-darker-in-IE effect Filburt mentioned in another thread.
    Attached Images Attached Images
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  10. #9
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    ok.. i belive you guys..
    thanks for looking into this Straight_up. i apreciate the research on your end..

    keep up the good work..

  11. #10
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Quote Originally Posted by filburt1
    And you can forget about styling a damn thing in Safari when it relates to form fields and elements. Aqua always takes priority.
    For the first time ever, filburt, I will disagree! You are able to style some aspects of forms, and tags in Safari.

    The original link in the tut looked the same in FF and Safari, w/ a light "search" in the search box. The text was formatted the same when I typed. In Safari, you can format the input text, but you cannot format the drop-down menu. And, the last time I used any tag elements in Safari, they worked fine, including an experiment where I made up a tag <bl> just to see if I could. (It doesn't work at all in IE).

    It could be that you're on an older version? I have version 2.0.3, but my experience is different from yours.
    Shani

    I have an eye for detail like you'd never believe.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

input type text style effects

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:38 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com