Help with resizing fields/buttons...

**nocturnix** · Mar 26, 2003 01:49

I want the following field and button to be the same size to look uniform and straight across...not sure how I would do this...please help!

Thanks, any help would be greatly appreciated!

**Zopester** · Mar 26, 2003 04:46

Possibly change the font-size of the input button?

Where your input button has a class of submit:

Code:

input.submit {
font-size:10px
}

10px may be too small, but try playing with the number. Just a suggestion, may not work, and I haven't tried it. Usual disclaimers etc...

**xhtmlcoder** · Mar 26, 2003 04:49

There are various ways however using the CSS height and width properties should be a fairly safe solution if you what those two controls to be the same height and width.

<style type="text/css">

</style>

**vgarcia** · Mar 26, 2003 06:57

Originally Posted by xhtmlcoder

There are various ways however using the CSS height and width properties should be a fairly safe solution if you what those two controls to be the same height and width.

<style type="text/css">

</style>

What if your input is a checkbox or radio button?

**redux** · Mar 26, 2003 08:03

checkboxes and radio buttons are the most difficult ones to style...in most cases, it's not even worth trying, as most attributes are not supported or don't affect them in the way you would think they do...

**xhtmlcoder** · Mar 26, 2003 12:33

Observably I were referring to the image in question and you'd use the 'class', or 'id' if there was the necessity, or apply the CSS "Attribute Selectors" which as far as I can recall fail in Micro$oft IE.

Actually you'd get some quite interesting results if you added width and height dimensions to a checkbox, well you certainly do in the early Mozilla since the checkbox and radio button would grow to those dimensions, thus in practice you can end-up with giant checkboxes, have fun:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hmmm Big</title>
<style type="text/css">
<!-- 
input {
 color: white;
 background-color : gray; 
 width : 100px; 
 height : 100px;     
-->  
</style>
</head>
<body>
<form action="#" method="post" id="myForm">
<input type="radio" name="choice" />
<input type="checkbox" value="submit" />
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</form>
</body>
</html>

As Redux implied radio buttons can be finicky beasts to style, the last time I began messing with radio buttons and colour states via CSS was a couple of years back, and I totally agree the results are not always what you expect

...

User Tag List

Thread: Help with resizing fields/buttons...

Thread Tools

Display

Help with resizing fields/buttons...

Bookmarks

Bookmarks

Posting Permissions