Styling submit button

HTML & CSS
1

Hi - I’m trying to style the submit button.

(1) In html this works:

<div class="boxrgt">
<form...
<input type="submit" style="color:blue;background:#ffffa0;" value="Go">
</form>

but in the css this does NOT work, I get the default gray box:

.boxrgt .submit{color:blue;background:#ffffa0;}

(2) is there a way to change the arrow into a pointy-finger when it hovers over the “Go”?

(3) Is there a way to change the text to black when they type something in? I have this in css:

.boxrgt input[type="text"] {color:#bbb;}

which I want for only the default text in the box (“enter name here”) but then when they type in their name “Val” into that box, I want Val to be black not #bbb.

I haven’t uploaded it yet, so can’t link to a sample.

Thank you! - Val

2

You are styling something with a class of “submit” in that code - but no such class exists in your HTML.

3

It should work (providing you add class="submit" to the input).

Ninjad!

1 Like
4

you have 2 choices. Either add a class=“submit” to your button OR point the styling at the input type

.boxrgt input[type="submit"]{color:blue;background:#ffffa0;}

I personally have a class setup that i just add to any button or text i want to make look like a button

5

oh yeah thank you SamA74, stupid of me to leave it out!

This doesn’t work:

.boxrgt input[type="submit"]{color:blue;background:#ffffa0;}

but adding Sam’s class in the html does.

6

You need to use :hover and change the cursor type for 2.

for 3 you need :focus like this

7

The cursor property:-

8

I got the cursor working thank you! But now still can’t figure out focus.

What do I add to this:

.boxrgt input[type="text"] {color:#bbb;}

so focus is #000?

9 
.boxrgt input[type="text"]:focus {color:#000;}
10

oh thank you! I was doing it like this:

.boxrgt input[type="text"] {color:#bbb;:focus color:#000;}
11

Focus is a “pseudo class”, so is part of the selector, not the property.
Same as :target and :hover.

12

Thank you! That makes it clear.

13

Is it maybe a placeholder that you’re after, i.e. a grey-ish sample text that will disappear when you type something into the input? There’s an HTML attribute for this, it goes like

<input type="text" placeholder="Text goes here..." />

Just a thought though, if not use :focus as suggested above. :-)

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.