March 21, 2012

css form- input/textarea styling & positioning.. code & image included

Question by AMC

I’m new to web design, so please forgive if this is super simple- I’ve tried everything I know and can’t quite seem to get this right.

I’ve put together a contact form using html & css. Ideally, I’d like to have a 1px line extending from each label to use as an input guide. This line should be level with the bottom of the label. I’d also like a series of lines extending vertically in the text area to allow for extra writing space.

Currently, the input lines for Name and Email aren’t showing, and there is only one line at the very bottom of the textarea for Message.

Here’s the code I’m working with:

    <div id="contact-form">
        <div id="invite">
            <h1>Let's Talk.</h1>
            <div class="postinfo">
                <h2>Have you got a project needing an eye for detail and a creative touch? I'd love to hear from you.</h2>
            </div><!-- end postinfo -->
        </div><!-- end invite -->
        <form>

            <label for="user">Name:</label>
            <input type="text" name="user" value="" /><br />

            <label for="emailaddress">Email:</label>
            <input type="text" name="emailaddress" value="" /><br />

            <label for="comments">Message:</label>
            <textarea name="comments"></textarea><br />

            <input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
        </form>
    </div><!-- end contact -->

#contact-form {
    float: left;
    margin-left: 300px;
    margin-top: 310px;
}

#invite .postinfo {
    list-style-type: none;
    width: 150px;
}

label {
    float: left;
    font-family: dalle;
    font-size: 160%;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: 200px;
    margin-top: -105px;
    width: 120px;
}

input, textarea {
    border-style: none;
    border-bottom: 1px solid #202020;
    margin-bottom: 5px;
    margin-left: 300px;
    margin-top: -105px;
    width: 245px;
}

textarea {
    width: 250px;
    height: 150px;
}

#submitbutton {
    background: none;
    border-style: none;
    font-family: Georgia, 
                 Constantia,
                 "Lucida Bright",
                 "Bitstream Vera Serif",
                 "Liberation Serif",
                 serif;
    margin-left: 173px;
    margin-top: 5px;
    width: 90px;
}

br {
    clear: left;
}

Ideal outcome:

ideal outcome

Answer by Starx

There were some unneeded CSS rules on your codes. Try this demo to see it fixed to some extent but lines on text area cannot be achieved using CSS.

You need to use image for that. See a demo

March 2, 2012

How to remove blue border around the button in Firefox?

Question by masato-san

I’m using Firefox 10, Windows 7 and not sure older version but when I clicked the button, the blue border appears around the button.

I created the example below.

http://jsfiddle.net/dEvKb/58/

I removed the dotted line with css below but I also do not want blue border. I can’t figure how to remove it or is it even possible to remove?

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner
{
    border: none;
    outline: none;
}

below didn’t work…

input[type="button"]:visited
{
    outline: none;
    border: none;
}

This is evil blue border I’m talking about.

enter image description here

Answer by Starx

That is the UI of Firefox, whether themed or none. Not something you got from coding.

If it is troubling you so much you can reset it and define your own style. Here is a reset rule for that.

button { background: none transparent; border: none; }

Check here

And you can add your styling on it later on. Here is a demo for that. You can define custom states for hover, visited , active like the way you want.

...

Please fill the form - I will response as fast as I can!