Reputation: 4149
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
Reputation: 7006
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
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