SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot dereko's Avatar
    Join Date
    Dec 2003
    Location
    Ireland
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with borders

    Hi,

    I am working on website which has alot of forms, anyhow I have set a style to set the border of "input" to 1 which is fine it does that and sets it to the color i specify but it also puts a border around radio buttons which i don't want.

    i actually got the code from one of the resent articles on this site.
    Simple Tricks for More Usable Forms- Sample Form

    It is to do with this peice of code:

    Code:
    ..
    input, textarea {
      border: 1px solid #ccc;
    }
    input:focus, textarea:focus {
      border: 1px solid #000;
    }
    ..
    I have radio buttons in my form and in IE 6.0 it puts a border around them. Bassically i want to set these styles above to text feilds but not radio buttons.

    I tried:
    Code:
    input.radio {
      border: none;
    }
    but that didn't work for me.

    Anyone know a possible solution? Is input.radio the right way to reference radiobuttons in CSS?

    Thanks,
    Derek

  2. #2
    SitePoint Addict
    Join Date
    Jul 2000
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you would need to add a class selector to your radio button, for example:
    <input type="radio" class="radio">

  3. #3
    SitePoint Zealot dereko's Avatar
    Join Date
    Dec 2003
    Location
    Ireland
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FauxPas
    I think you would need to add a class selector to your radio button, for example:
    <input type="radio" class="radio">
    So if say I wanted to, there is no way of setting a style with CSS for say just textfeilds, not ratio buttons without setting a class to it.

    See on text feilds a class is already associated by class="required" etc..
    This is then used in the form validation.

    I think I could sort my problems if I can just reference textfeilds in CSS and JavaScript instead of all input tags.

    Any ideas?

  4. #4
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a way to do this in CSS. Only one little problem... It's one of those things that IE doesn't support.

    So your best bet is, as already mentioned, to go with classes. You can have multiple classes on one element, just seperate them with a space: class="radio required".

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  5. #5
    SitePoint Zealot dereko's Avatar
    Join Date
    Dec 2003
    Location
    Ireland
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm ok, yea can do that I suppose, just means changing alot of code .. agh well.

    It is off topic, but do you happen to know if you can refernce all text fields in javascript:
    Code:
        var input;
        var inputs = document.getElementsByTagName('input');
        for (var i = 0; (input = inputs[i]); i++) {
            addEvent(input, 'focus', oninputfocus);
            addEvent(input, 'blur', oninputblur);
        }
    but instead of getting an array of inputs.. can it get an array of text feilds?

    Thanks
    Derek

  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just test if the type attribute has the value 'text'. This ought to work:
    Code:
        var input;
        var inputs = document.getElementsByTagName('input');
        for (var i = 0; (input = inputs[i]); i++) {
            if(input.getAttribute('type') == 'text') {
                addEvent(input, 'focus', oninputfocus);
                addEvent(input, 'blur', oninputblur);
            }
        }
    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  7. #7
    SitePoint Zealot dereko's Avatar
    Join Date
    Dec 2003
    Location
    Ireland
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that worked a treat.. all appears to be working fine now... When I get this site finished I'll shoot up a link and see what people think of the usablity.


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
  •