I have looked everywhere I can but can't figure this out.
How do you change the HEIGHT of the text boxes? By default, they are just way too tall and take up a lot of unnecessary space. I would like to make them just slightly larger than the font in the text box that shows when the user types in a value.

I've looked in the default.css file and I must admit that it is way more complicated than the CSS files I work with regularly. I have tried changing some of the values but can't seem to find anything that makes any difference at all. I've even tried changing the colors and other things to no avail.

I've tried changing it here:
#docContainer.fb-large input[type=tel]{
color: #dee3df;
font: bold 12px Helvetica, Arial, Sans-serif;
border: 1px solid rgb(220,223,231);
border-top-color: rgb(170,173,178);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width:99%;
height:1.1em;
max-width:100%;
}

/* Rule for the input-boxes */
#docContainer .fb-input-box input {color: rgb(69,69,69);
font: bold 12px Helvetica, Arial, Sans-serif;
border: 1px solid rgb(220,223,231);
border-top-color: rgb(170,173,178);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
height:1.1em;
border-radius: 3px;}

I can't find where it will work. Nothing I change seems to have any effect at all.

I've verified that the text / input boxes I want to change are using the class="fb-input-box", but there are quite of few of those in the css file and I haven't found the one that seems to make any difference.

Anybody else tried this?

For an example of a form that I'm trying to change the size of the boxes, go here:
http://www.drjoshweight.com/forms.html

The boxes are 2x the size they need to be and I am getting frustrated trying to figure it out.

Thanks...

defualt css.

#docContainer .fb-input-box input {
background: url("../images/fb_bg_input.png") repeat scroll 0 0 transparent;
color: #666666;
height: 6px;
}

Thank you so much. That works for me. The first time I tried it, the boxes got smaller and the text was getting cut off at the top and bottom. I looked for some padding values and found them. Once I adjusted the padding appropriately, it turns out just like I want it too.

I'm guessing that if I use Web Form Builder to edit the form (adding / subtracting fields) that it will replace the default CSS with a new one. Do you know if that is the case or not?

Thanks!

Ron

I have not checked it but the program creates the files to display the text box as you designed it so it follows the css is similar but sizes are written in to suit so yes the css would be different

Yup. Keep a copy of the altered default.css in a safe location so you can replace it quickly.

Next time you upgrade Form builder your default css file is overwritten.
To avoid this create a new theme that suits what you want to have in your css file.
Follow the instructions here: http://www.coffeecup.com/help/articles/creating-your-own-web-form-builder-themes/.
At first it looks a little complicated but when you have tried it's quite easy.
I have created many new themes with this guide.

Thanks everyone! I'm still learning, but getting there.
It looks like creating my own theme with the basics I always want will be the best way to go.

Again, thanks!