styling input type

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Jeff

    styling input type

    I needed to to do a quick width set for form input type="text",

    So:

    input{
    width: 200px;
    }

    That also styled all my radio buttons!

    Is it possible to set a style for just one type?

    Jeff
  • dorayme

    #2
    Re: styling input type

    In article <rbWdnbJlFYQyUb zUnZ2dnUVZ_snin Z2d@earthlink.c om>,
    Jeff <jeff@spam_me_n ot.comwrote:
    I needed to to do a quick width set for form input type="text",
    >
    So:
    >
    input{
    width: 200px;
    }
    >
    That also styled all my radio buttons!
    >
    Is it possible to set a style for just one type?
    >
    Perhaps look at

    <http://www.w3.org/TR/html401/interact/forms.html#adef-size-INPUT>

    17.4 The INPUT element

    size = cdata [CN]
    This attribute tells the user agent the initial width of the control.
    The width is given in pixels except when type attribute has the value
    "text" or "password". In that case, its value refers to the (integer)
    number of characters.

    --
    dorayme

    Comment

    • Jonathan N. Little

      #3
      Re: styling input type

      Jeff wrote:
      I needed to to do a quick width set for form input type="text",
      >
      So:
      >
      input{
      width: 200px;
      }
      >
      That also styled all my radio buttons!
      >
      Is it possible to set a style for just one type?
      Yes

      input[text] {...}

      It is called an *attribute* selector.



      But, before you get too excited, realize that IE does not support
      attribute selectors...


      --
      Take care,

      Jonathan
      -------------------
      LITTLE WORKS STUDIO

      Comment

      • Chris F.A. Johnson

        #4
        Re: styling input type

        On 2008-11-17, Jeff wrote:
        I needed to to do a quick width set for form input type="text",
        >
        So:
        >
        input{
        width: 200px;
        }
        >
        That also styled all my radio buttons!
        >
        Is it possible to set a style for just one type?
        Yes. Add a class to your text input and style that.

        HTML: <input class="text" .... >

        CSS: input.text { width: 15em; }

        (I would avoid using px to set the width.)

        --
        Chris F.A. Johnson <http://cfaj.freeshell. org>
        =============== =============== =============== =============== =======
        Author:
        Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

        Comment

        • Jeff

          #5
          Re: styling input type

          Chris F.A. Johnson wrote:
          On 2008-11-17, Jeff wrote:
          > I needed to to do a quick width set for form input type="text",
          >>
          >So:
          >>
          >input{
          > width: 200px;
          >}
          >>
          >That also styled all my radio buttons!
          >>
          > Is it possible to set a style for just one type?
          >
          Yes. Add a class to your text input and style that.
          >
          HTML: <input class="text" .... >

          I would prefer to set all, and then unset the few I don't want. There's
          way to many classes in the typical stylesheet.

          Is there a way to revert back to the default, unset width after it
          has been set?



          <style type="text/css">
          input{
          width: 15em;
          }

          ..default_class {
          width: what unsets width?
          }

          </style>

          <input type="text" ...>
          <input type="radio" class="default_ class">

          Jeff

          CSS: input.text { width: 15em; }
          >
          (I would avoid using px to set the width.)
          >

          Comment

          • Jukka K. Korpela

            #6
            Re: styling input type

            Jonathan N. Little wrote:
            > Is it possible to set a style for just one type?
            >
            Yes
            >
            input[text] {...}
            No, the correct syntax is
            input[type="text"] {...}

            The selector input[text] would match an input element with an attribute
            named text, i.e. <input text="..." ...>, and there's no such element of
            course.
            But, before you get too excited, realize that IE does not support
            attribute selectors...
            IE 7 does, in "standards" mode.

            Interestingly, IE 7 interprets that the selector also matches an input
            element with no type attribute, apparently based on the idea that
            type="text" is the default. I think this violates the specifications, since
            the selector should match only an element that actually has the attribute
            type="text" in markup. Firefox seems to agree with me.

            Of course, independently of such support issues, a text input element should
            always have the size="..." attribute, so that its size is at some level
            defined even when CSS is off; see the CSS Caveats,


            --
            Yucca, http://www.cs.tut.fi/~jkorpela/

            Comment

            Working...