Highlighted

Not sure how to enter in CSS

Community Beginner ,
Apr 10, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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"...

}

Views

367

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Not sure how to enter in CSS

Community Beginner ,
Apr 10, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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"...

}

Views

368

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 10, 2018 0
Adobe Community Professional ,
Apr 10, 2018

Copy link to clipboard

Copied

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

.packageforming {

     width:40%;

     height:40%;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2018 1
Community Beginner ,
Apr 10, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2018 0
Adobe Community Professional ,
Apr 10, 2018

Copy link to clipboard

Copied

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"...

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2018 1