CSS question - help required!

liunx

Guest
Hello

I have the following in my <HEAD></HEAD> tags:

<style>
.searchbox {
border:solid 1 D38F50;
font-family: verdana,arial,helvetica;
font-size: 8pt;
background-color: black;
COLOR: white;
font-weight: medium;
}
</style>

and further down the page, I have:

<p><input type="submit" name="submit" class="searchbox" value="Submit" size="6"></input>

<input type="reset" name="clear" class="searchbox" value="Reset" size="6"></input>
</p>

If I change the colour value in the style tag (COLOR: white;) to say, RED, the colour of the 'Submit', and 'Reset' buttons changes to red, and so does the colour of the text the user types in the form.

Is it possible to change the colour of the words 'Submit' and 'Reset', while maintaining the colour white as the colour of the text in the form's fields?

Many thanks for any help.

laTortugaIt's easy. Just make a separate class for the text box:

<style type="text/css" media="screen">
.searchbox {
border:solid 1 D38F50;
font-family: verdana,arial,helvetica;
font-size: 8pt;
background-color: black;
COLOR: #0f0;
font-weight: medium;
}

.AtextBox {
border:solid 1 D38F50;
font-family: verdana,arial,helvetica;
font-size: 8pt;
background-color: black;
COLOR: white;
font-weight: medium;
}

AND IN HTML:

<p><input type="submit" name="submit" class="searchbox" value="Submit" size="6">

<input type="reset" name="clear" class="searchbox" value="Reset" size="6">
</p>

<p>
<input type="text" class="AtextBox" size="30">


The input tag does not have an end tag. If you are coding in xhtml, just add a space and a forward-slash at the end of the input tag:

<input type="button" value="Stuff" />Originally posted by laTortuga
border:solid 1 D38F50;


I'd like to mention that you have no less then 2 errors in that line.

#1 You MUST specify a unit with your width. You probably want 1px

#2 D38F50 is an invalid color. Again you need a unit. If it'a a hexvalue it should be #D38F50

To sum it up use eg
border:solid 1px #d38f50;

Also worth mentioning is that you shold always end a list of fonts with a generic fontfamily eg:
font-family: verdana,arial,helvetica,sans-serif;

and the use of points for fontsizes should only be used for media PRINT, not media SCREEN.
For stuff that is supposed to be displayed on a monitor, use pixel or preferably % eg
font-size: 80%;http://banners.dollarmachine.com/pic/2014000/hal001.gif (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)Hello Stefan and Greg

Many thanks for both your postings - I'm grateful.

I didn't know I had to use:

border:solid 1px #d38f50;

so thanks for tidying up the existing code and offering more good stuff!

Cheers!

laTortugaYou are welcome :)
 
Back
Top