CODEWITHSUNDEEP
htmlformscss
Paul Ferris
Paul Ferris

Reputation: 346

Manipulating HTML forms with CSS

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>

Upvotes: 0

Views: 312

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

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.

Upvotes: 1

wilsonrufus
wilsonrufus

Reputation: 449

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;
}

Upvotes: 1

Related Questions