Hi can anyone tell me if its possible to add a vorder colour and a background to the selected radio button and text on this website http://62.6.176.22/products/leaflets.aspx?Id=145399&Key=F8FA69A7-4AC5- 4986-97F3-6C8C9520FA87. This is a site which is supplied to us and we can only edit the CSS with our own styles but not the code. Any pointers will be much appreciated
Hi Jon
I was looking to set it so that when you select the relevant option a green border with a slightly lighter green colour background wraps the text and radio button. I have been trying to achieve this using the .defaulttextradio and adding a:active to it but I can't seem to get this to work any ideas?
Sorry, that's not what a:active is for (though it sounds like it). a:active only shows up in some browsers when the link affected is clicked and held down. It's not for setting any kind of persistent change in CSS.
Unfortunately, I don't think you can do what you want without the use of Javascript to control the css of elements within the page. You won't be able to do it without changing the page's code.
Actually...
I may have spoken too soon.
I've been doing some playing around and came up with this. Is this kind-of what you're looking for?
<!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>
input[type="radio"] {
display:block;
float:left;
height:20px;
width:20px;
}
label {
display:block;
background-color:#bbb;
padding:5px 10px;
font-family:Verdana;
font-size:12px;
border:1px solid #bbb;
}
input[type="radio"]:checked + label {
background-color:#6F6;
border:1px solid green;
}
</style>
</head>
<body>
<div style="margin:auto; width:552px;">
<div>
<input type="radio" id="radio1" name="radios" value="value1" checked>
<label for="radio1">Button1 - Notes would go here (this is the radio button Label)</label>
<input type="radio" id="radio2" name="radios" value="value2">
<label for="radio2">Button2 - Notes would go here (this is the radio button Label)</label>
<input type="radio" id="radio3" name="radios" value="value3">
<label for="radio3">Button3 - Notes would go here (this is the radio button Label)</label>
</div>
</div>
</body>
</html>
North America
Europe, Middle East and Africa
Asia Pacific