Results 1 to 8 of 8

Thread: CSS 3 input text styling

  1. #1
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS 3 input text styling

    How can I style the input box (input type="text") and not affect other input types like radio box, checkbox, button.

    I tried this css:

    input {
    ...
    ...
    ...

    }

    but this css affects all input components including the radio boxm checkbox, button, etc... I only want to customize the input text.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Use a class selector:

    Code:
    .tbox {
    color:red;
    background-color:lightblue;
    }
    Then assign the class name to the element(s) in the markup:

    HTML Code:
    <input type="text" class="tbox">
    Now, since css2, this type of syntax is supposed to work:

    Code:
    input[type="text"] {
    color:red;
    }
    However, IE does not support it. Opera and FF do.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I cannot use a class selector so the .tbox you suggested will not work for me.

    Now, is there any other way besides the input[type="text"] selector. I tried that also, and indeed it does not work on IE6. I was thinking maybe there are other ways to go around this one, besides using a class selector

    regards,

    Anton

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, if they all have id's, you could collect the id's as a single selector. If there is something intrinsic about their parent elements that is different from the other form input elements' parent elements, you could use that (like if they are all in div elements and the other inputs are not).

    I'm a little curious as to why you cannot use class. Sounds like you have little or no control over the content. Is this like a cafe-express site, or some other template oriented site?

    A script could be used but, it would have no effect in non-javascript enabled browsers. If your content is already highly dependent upon javascript (a bad idea to begin with) there would be little harm in using a script. Also, even if the page is not dependent upon script, just adding like a little color or something like that with script would be fine as long as the content was still legible without it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    coudn't you do input.tbox {color: red;}

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by sandman
    coudn't you do input.tbox {color: red;}
    How is that different than:

    Quote Originally Posted by myself
    Use a class selector:


    .tbox {
    color:red;
    background-color:lightblue;
    }

    Then assign the class name to the element(s) in the markup:


    HTML Code:
    <input type="text" class="tbox">
    in so far as:

    Quote Originally Posted by clarkekent
    I cannot use a class selector so the .tbox you suggested will not work for me.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Im using JSF. I haven't figured out the generic style class/selector that the base JSF uses. Thats the restriction, atleast while I haven't figured out the syle classes used for the textfield. So that's why i can't use a class.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not very familiar with JSF but, a quick search implies that it is a way of using Java, not any particular package. In any case, if what you have is a page that was generated using JSF, you should be able to inspect its source, its generated source, and/or walk its DOM tree to find what class names or ids have been assigned to things. Firefox with the developer's extension is the best tool for this job that I know of though, any browser should be able to give you that sort of information using its 'view source' option. Almost all generated pages present to the browser as HTML code that can be seen with the 'view source'. If any classes or ids have been assigned, you will see them in this view.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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