7 replies [Last post]
kyazdani
kyazdani's picture
Offline
newbie
North West, UK
Last seen: 11 years 16 weeks ago
North West, UK
Timezone: GMT+1
Joined: 2010-09-23
Posts: 8
Points: 12

Hi guys,

wondering if someone can help. I have a series of buttons on my site. All of which I cannot change what the class is called on the buttons as it runs through a content management system. However I do have a differnet Value in each which displays as the title. See the case below.

<input type="button" value="Continue Shopping" onclick="history.back()" class="buttonstyle" onmouseover="this.className='buttonstyle btnhov'" onmouseout="hov(this,'buttonstyle')">

<input type='submit' name='sub'  value='Add' class="buttonstyle" onmouseover="this.className='buttonstyle btnhov'" onmouseout="hov(this,'buttonstyle')">

The class on each button is called "buttonstyle" this button's value is "Continue Shopping", I have another Called Add on this page. Basically I want to create a style rule that works off the class "buttonstyle" but references the value to display (for arguments sake), the "Add" button as Blue and the "Continue Shopping" button as Red.

Does anyone know how to do this? I am really stuck

Thanks

Kaz

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Attribute selectors

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kyazdani
kyazdani's picture
Offline
newbie
North West, UK
Last seen: 11 years 16 weeks ago
North West, UK
Timezone: GMT+1
Joined: 2010-09-23
Posts: 8
Points: 12

Here is my CSS and HTML. how

Here is my CSS and HTML. how do I write the css so it takes the value="add" to change the color of the text on that button?

Thanks

Kaz Laughing out loud

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.buttonstyle {color:#0F3; background-color:#000;}
.buttonstyle.vlaue.add{color:#F00;}
</style>
</head>
 
<body>
<input type="button" value="Continue Shopping" onclick="history.back()" class="buttonstyle" onmouseover="this.className='buttonstyle btnhov'" onmouseout="hov(this,'buttonstyle')">
 
<input type='submit' name='sub'  value='Add' class="buttonstyle" onmouseover="this.className='buttonstyle btnhov'" onmouseout="hov(this,'buttonstyle')">
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The answer's in the link.

The answer's in the link. Just substitute value for title in the examples given.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kyazdani
kyazdani's picture
Offline
newbie
North West, UK
Last seen: 11 years 16 weeks ago
North West, UK
Timezone: GMT+1
Joined: 2010-09-23
Posts: 8
Points: 12

Ah cool - thanks for that -

Ah cool - thanks for that - thats really helpful. Any ideas on how I would get it not to display the value as text on the button or how I could write a different name on the button?

What I mean is at the moment the value for one of the buttons is "Add" can I get it to display "Add to Basket" instead? I cannot amend the code, only the CSS.

Thanks again Shock

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.buttonstyle[value="Add"] {color:red; background-color:#FFFF00; border:1px black solid; cursor:pointer;}
.buttonstyle[value="Continue Shopping"] {color:blue; background-color:#FF0000; border:1px black solid; cursor:pointer;}
.buttonstyle:hover[value="Add"] {color:red; background-color:green; cursor:pointer;}
.buttonstyle:hover[value="Continue Shopping"] {color:blue; background-color:orange; cursor:pointer;}
</style>
</head>
 
<body>
<input type="button" value="Continue Shopping" onclick="history.back()" class="buttonstyle" onmouseover="this.className='buttonstyle btnhov'" onmouseout="hov(this,'buttonstyle')">
 
<input type='submit' name='sub'  value='Add' class="buttonstyle" onmouseover="this.className='buttonstyle btnhov'" onmouseout="hov(this,'buttonstyle')">
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

No, you can't change input

No, you can't change input values with CSS.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kyazdani
kyazdani's picture
Offline
newbie
North West, UK
Last seen: 11 years 16 weeks ago
North West, UK
Timezone: GMT+1
Joined: 2010-09-23
Posts: 8
Points: 12

Hi again, just another

Hi again,

just another question regarding a similar issue with this. If I want to pre load the hover states in my CSS how do I write it out?

Do you have an example I can follow of preloading images to the page through CSS?

Regards

Kaz

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Here's one method.

Here's one method.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference