CODEWITHSUNDEEP
css
DSblizzard
DSblizzard

Reputation: 4149

Input box and button have the same width, but I don't want it

html:

<form id="personal_info" action="..." method="post">
    <legend>Personal info</legend>
    <p>
        <label for="fullname">Your name: </label>
        <input name="fullname" id="fullname" type="text" tabindex="1" />
    </p>
    <p>
        <label for="email">Your e-mail: </label>
        <input name="email" id="email" type="text" tabindex="2" />
    </p>
    <p><input id="send" type="submit" value="Send" /></p>
</form>

css:

form#personal_info {
    background:#dee;
    width:470px;
    padding:10px;
    border:1px solid #000;
    margin:0;
}
form#personal_info legend {
    font-family:georgia, sans-serif;
    font-size:1.1em;
    font-weight:bold;
    border:3px solid #fff;
    margin-bottom:5px;
    padding:3px;
    width:270px;
    background:#fff url(legend.gif) repeat-x center left;
}
form#personal_info label {
    clear:left;
    display:block;
    float:left;
    width:100px;
    text-align:right;
    padding-right:10px;
    color:#888;
    margin-bottom:0.5em;
}
form#personal_info input {
    border:1px solid #fff;
    background:#fff url(legend.gif) repeat-x top left;
    padding-left:0.5em;
    margin-bottom:0.6em;width:300px;
}
form#personal_info #button1 {
    color:#c00;
    padding-right:0.5em;
    cursor:pointer;
    margin-left:8px;
    width:100px;
}
form#personal_info #button1:hover {
    background-position:center left;
    color:#000;
    width:100px;
}

Input and button have the same width of 300px, but I want button to be 100px wide. What's wrong?

Upvotes: 1

Views: 178

Answers (2)

Priyank Patel
Priyank Patel

Reputation: 7006

See Demo

If you just apply style to input it will apply those styles to all the input element such as textbox,button as they are input elements.

You should use id's to apply styles uniquely.

Using #button doesnot mean these styles will be applied to buttons.

What you can do is asign id's to your input elements and then apply styles accordingly

<input id="txtEmail" type="text"/>
<input id="btnSend" type="submit"/>

CSS:

#txtEmail
{
//your styles
}

#btnSend
{
//your styles
}

Alternatively you can do something like this

input[type="text"]
{
//your styles
}    

input[type="submit"]
{
//your styles
}

Upvotes: 2

Lee Goddard
Lee Goddard

Reputation: 11193

You can specify which input type the rule should change:

input[type='text']

Also, if you are using IDs in your CSS #id, you do not need to prefix them with anything - it will not help!

Upvotes: 0

Related Questions