Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS for multiple different input types

    Hi
    I have a form with some text fields and some buttons. The buttons control if the text fields can be edited. When in edit mode the text fields change colour etc. There is quite a bit of positioning involved for these buttons and fields. I am trying to do the following.
    Have one style for buttons.
    One style for text fields when in edit mode.
    One style for text fields when in non edit mode.
    Then each button and text field needs to have location specified in a separate style component.
    The problem I have is that these are all "input" tags. I have searched net and found nothing on how to do this.
    I want to put css in external file

    Any valid suggestion will be helpful thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Use the attribute selector:
    Code:
    input[type=text] {…}
    input[type=submit] {…}
    This is looking for all inputs that have a type attribute with the respective value.

    I don’t know, however, what you mean by “edit mode”.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for that - I found an example using the type attribute - but could not figure out how I would use it for
    my application.

    I have the text inputs set to disable to prevent text entry until one of the buttons is pressed.
    So for the text inputs I need to do something like this:

    input for disabled mode
    {
    border: 1px solid #006;
    position:absolute;
    background-color: #011901;
    color:#999999;
    ...
    ..
    }


    input for enabled mode (I called this edit mode)
    {
    border: 1px solid #006;
    position:absolute;
    background-color: #ffffff;
    color:#000000;
    ...
    ..
    }

    then for each input I need something like:

    .Name
    {
    width: 180px;
    left: 60px;
    }
    .Zone
    {
    width: 140px;
    left: 539px;
    }
    .Chan
    {
    width: 20px;
    left: 692px;
    }


    Many of the setting are the same for both the enabled and disabled mode. So I guess I need one part that is common to both enabled and disabled mode
    One part that is different for each mode and then each text box needs a separate part that gives its position and width.
    Last edited by davidgrm; 10-29-2011 at 10:31 PM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    OK, one way to differentiate between disabled and “enabled” inputs is, again, the attribute selector:
    Code:
    input[disabled] {…} /* look for inputs with “disabled” attribute */
    So, at first you would apply default styles to all text inputs and then you’d override styles for disabled inputs, e. g.:
    Code:
    input[type=text] {background-color: yellow;}
    input[disabled] {background-color: lime;}
    /* or even more specific */
    input[type=text][disabled] {background-color: aqua;}
    Another way to differentiate various inputs of the same type is by name attribute since usually all inputs have that:
    Code:
    input[name=zone] {…}
    However, usually, inputs have a label associated with them, and therefore need a unique ID, too, through which they can be adressed:
    Code:
    <div>
      <label for="i_name">Name</label>
      <input id="i_name" name="name" type="text" />
    </div>
    <div>
      <label for="i_zone">Zone</label>
      <input id="i_zone" name="zone" type="text" />
    </div>
    …
    Therefore you could do:
    Code:
    #i_name {…}
    #i_zone {…}
    You could even do something like this:
    Code:
    #i_name[disabled] {…}
    Last edited by VIPStephan; 10-30-2011 at 01:08 AM.

  • Users who have thanked VIPStephan for this post:

    davidgrm (11-01-2011)

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by davidgrm View Post
    I am trying to do the following.
    Have one style for buttons.
    You can use one of the following depending upon which HTML elements and attributes are being used:

    Code:
    button { /* … */ }
    input[type="submit"] { /* … */ }
    input[type="button"] { /* … */ }
    input[type="image"] { /* … */ }
    If you are using input elements for your buttons, I would consider converting them to button elements. The latter are easier to use, IMO, because you can put other HTML elements inside of them and because they make CSS selectors less verbose.

    Quote Originally Posted by davidgrm View Post
    One style for text fields when in edit mode.
    One style for text fields when in non edit mode.
    You can use CSS3+/HTML5 selectors for this:

    Code:
    input:enabled { /* … */ }
    input:disabled { /* … */ }
    I believe these are supported in the latest release of every browser, but attribute selectors are probably better supported in case older browsers must be taken into account.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys - you have help me sort out my problems


  •  

    Posting Permissions

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