SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help Applying CSS to Form Fields

    Guys

    I have this form, I want to define a 2px orange border around the form fields and maybe make the search button orange and a bit 3d using CSS:

    Code:
    <div class='searchform'>
      <form name='search' action='<?php print $config_baseHREF ?>search.php'>
        <input type='text' name='q' id='q' size='35' value='<?php print (isset($q)?$q:""); ?>' />
        <input type='submit' value='<?php print translate("Search"); ?>' />
      </form>
    </div>
    - How do I address this particular form on the stylesheet?

    - I'm thinking of using code similar to the below, so how do I apply it to this particular form? Thanks.

    Code:
    input
    {
    color: #781351;
    background: #fee3ad;
    border: 1px solid #781351
    }
    Thanks guys

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, so I got it:

    Code:
    .searchform input     {
    color: #781351;
    background: #fee3ad;
    border: 1px solid #781351
    }
    I suppose it was a basic question. Is answering your own questions the first sign of madness??

    Rgds

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way you have it now all the input fields in your website will have a border and a background color. You have to make classes to accomplish this i.o.w. something like:

    Code CSS:
    .input {
        border: 1px solid #781351; color: #781351;
    }
     
    .button {
        background: #fee3ad;   
    }

    Code HTML4Strict:
      <form name='search' action='<?php print $config_baseHREF ?>search.php'>
        <input type='text' name='q' id='q' size='35' class='input' value='<?php print (isset($q)?$q:""); ?>' />
        <input type='submit' class='button' value='<?php print translate("Search"); ?>' />
      </form>
    </div>
    <div class='searchform'>

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by accelerator View Post
    I suppose it was a basic question. Is answering your own questions the first sign of madness??

    Rgds
    It's signs that you are improving .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •