1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How would I style these lines?

Discussion in 'CSS' started by chrisj, Nov 5, 2014.

  1. #1
    How would I style these lines?
    SEMrush
    <input autocomplete="off" id="keyword" name="keyword" onclick="clickclear(this, 'Enter Text')" onblur="clickrecall(this,'Enter Text')" />
    <input type="submit" value="Search" />
    Code (JavaScript):
    Any help will be appreciated.
     
    chrisj, Nov 5, 2014 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #2
    With css, of course.
    input#keyword {
      foo: blah;
      }
    
    input[type="submit"] {
      bar: blah;
      }
    Code (markup):
    I know it's allowed to put js event handlers in the html markup, but it is a very poor practice.

    cheers,

    gary
     
    kk5st, Nov 5, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #3
    I wouldn't -- because I wouldn't be using scripttardery instead of a freaking LABEL... Just like placeholder that's accessibility and semantic trash; though honestly at this point I'm sick of saying "semantic markup" and am going to start calling it what it REALLY is, using HTML properly!!! (which you clearly are not...)

    I would also be saying what TYPE of input that first one is...

    Though... you didn't say HOW you want them styled... so your question isn't even complete enough to answer.
     
    deathshadow, Nov 5, 2014 IP
  4. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #4
    Hi chrisj,

    Here's an example markup to style those lines.
    <style type="text/css">
        input#keyword {
            border: 1px solid #bdc7d8;       
            margin: 0 0 15px;
            width: 377px;
            font-size: 18px;
            padding: 8px 10px;
            display: block;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        input[type="submit"] {       
            background-color: #79bc64;
            color: #fff;
            text-align: center;
            padding: 8px 20px;
            font-size: 16px;
            border: 1px solid #bdc7d8;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
    
    <input autocomplete="off" id="keyword" name="keyword" onclick="clickclear(this, 'Enter Text')" onblur="clickrecall(this,'Enter Text')" />
    <input type="submit" value="Search" />
    HTML:
    I hope this helps.

    Thanks and God bless always!
     
    alfieindesigns, Nov 5, 2014 IP
  5. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    Thanks
     
    chrisj, Nov 10, 2014 IP
  6. Naina S

    Naina S Active Member

    Messages:
    203
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    93
    #6
    input [type="text"]
    {
    }
    input [type="submit"]
    {
    }
     
    Naina S, Nov 27, 2014 IP
  7. geniuscapri

    geniuscapri Well-Known Member

    Messages:
    138
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    113
    #7
    Below code is hover effect.

    <style type="text/css">
        input#keyword {
            border: 1px solid #bdc7d8;     
            margin: 0 0 15px;
            width: 377px;
            font-size: 18px;
            padding: 8px 10px;
            display: block;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        input#keyword:hover {
            border: 1px solid #000;     
        }
        input[type="submit"] {     
            background-color: #79bc64;
            color: #fff;
            text-align: center;
            padding: 8px 20px;
            font-size: 16px;
            border: 1px solid #bdc7d8;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {     
            background-color: #666666;
            border: 1px solid #000000;
        }
    </style>
    Code (CSS):
     
    geniuscapri, Dec 15, 2014 IP