Manipulating HTML forms with CSS

Question

I've been working on some forms, and I'm not sure how to customize them.

This solution seems to work, but in my case the properties are simply applied to the area around the form rather than the form itself.

CSS:

.Forms{
    position:relative;
    top:100px;
    background-color:#666;
    font-family:'Unica One';
    font-weight:500;
}

HTML:

<form action="" method="post" class="Forms" id="Form1">
    <input type="submit" value="Email Zoltan (Financial Manager, Director)" />
    <input type="hidden" name="button_pressed" value="1" />
</form>

what exactly is the (unexpected) behaviour? could you maybe give an example? — Pankrates
– Pankrates, Commented Jan 12, 2013 at 20:51
@Pankrates The area around the button is modified, but never the button itself. So background-color produces a rectangular box, border changes change the borders of the box and not the button, etc. — Paul Ferris
– Paul Ferris, Commented Jan 13, 2013 at 4:32
@IlanBiala I don't see the point, honestly. The problem is self-evident enough for that to be uneccesary. — Paul Ferris
– Paul Ferris, Commented Jan 13, 2013 at 9:38
obviously not. A jsfiddle is always better to begin with than just posting your code because people see what else you have to accomplish, maybe a better idea is possible but we didn't know what it was for so we suggested any solution. — Ilan Biala
– Ilan Biala, Commented Jan 13, 2013 at 15:18

Jukka K. Korpela · Accepted Answer · 2013-01-12 21:37:18Z

The CSS code sets properties on the form element. Apparently you want to apply some of them to the input button instead, so you need to break the rule into two rules:

<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Unica+One'
  rel='stylesheet'>
<style>
.Forms {
    position: relative;
    top: 100px; 
}
.Forms input[type=submit] {
    background-color: #666;
    font-family: 'Unica One';
}
</style>
<form action="" method="post" class="Forms" id="Form1">
    <input type="submit" value="Email Zoltan (Financial Manager, Director)" />
    <input type="hidden" name="button_pressed" value="1" />
</form>

I presume Unica One is meant to refer to a Google font with that name. In that case, do not set font-weight, since that font exists as normal (400) typeface only. If you try to set the weight to 500, most browsers ignore it but some may apply algorithmic bolding, which produces questionable results.

Note that setting the background color changes the basic rendering too: the default button, usually with rounded corners in modern browsers, turns to a rectangular box with a bit odd border. You can change this by setting various border properties (including border-radius) on the input element. The point is that buttons have built-in rendering in browsers, but if you set certain crucial CSS properties, this rendering changes to something different, and you should consider setting different other properties as well, when relevant.

P.S. The button becomes almost illegible, due to insufficient color contrast mostly, and Unica One isn’t really suitable for use like this.

The contrast shouldn't be an issue - the parent div has an opacity of .4, so #666 goes from dark gray to cloudy white.

wilsonrufus · Accepted Answer · 2013-01-12 21:03:51Z

1

try this give css to the form input submit button as said by scott

form.Forms input[type="submit"]{
    position:relative;
    top:100px;
    background-color:#666;
    font-family:'Unica One';
    font-weight:500;
}

answered Jan 12, 2013 at 21:03

wilsonrufus

4492 gold badges5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Manipulating HTML forms with CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related