Home/ Questions/Q 9120689
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T05:40:49+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0