How would I style these lines?

How would I style these lines?

<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.

 

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

 

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.

 

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!

 

Thanks

 

input [type="text"]
{
}
input [type="submit"]
{
}

 

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):