Not sure how to enter in CSS

[jodmcc49]

I have a form on my website that I need to remove the width and height of image that is used as the button to validate the page. Here is the code:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="paypal">

  <p><input name="submit" type="image" class="packageformimg" src="http://www.renegadescookingteam.com/images/To Donate.jpg" width="40%" height="40%" alt="Make payments with PayPal - it's fast, free and secure!" /><img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />

The input name is the same as another input on the same page.

To specify just this image in the CSS, would I enter it as:

input[name=submit], input[type=image], input[src*="To Donate.jpg"] {

     width: 40%;

     height: 40%;

}

or

input[name=submit], input[type=image], input[href*="To Donate.jpg"] {

     width: 40%;

     height: 40%;

}

I tried looking this up on http://www.w3schools.com, but wasn't sure if either entry would be correct. Also noticed that I probably need to put an underscore between "To" and "Donate" so there aren't any spaces in name of file.

Thanks,

John

[Jon Fritz]

Target the packageforming class of the input instead of the <input> tag in your css...

.packageforming {

     width:40%;

     height:40%;

}

[jodmcc49]

Thanks for the help. I also had others input tags:

input[name=submit2], input[name=submit3], input[name=submit4], input[name=submit5]

That use the same .packageforming class, but with a different width and height. Should I just duplicate the class tag and rename it to .packageforming2 and link it to the input with the 40% width and height?

[Jon Fritz · Accepted solution]

Classes, Names and IDs should all mean something to you. Tacking a number on the back of the same class name over and over will probably get pretty confusing, and forget about remembering what you did when you come back to it in 6 months to make changes.

Simplify what you're doing.

If your inputs all have different names (which they should, because "that's the rules"), you can target a specific one by singling it out in the css, after the general css that applies to all of them...

input[type="submit"] {
     ...all shared css...

     ...that affects all inputs...
}
input[name="submit1"]{

     ...specific css to this button...

     ...that only affects name="submit1"...

}
or

#submit1 {

     ...specific css that only affects...
     ...a submit button with id="submit1"...

}