Currently, I am in the process of creating a price list for a section of a website I'm developing. To make it interactive, I am utilizing checkbox type inputs along with labels so that users can select the services they desire, and the webpage will automatically calculate the total cost. It's a straightforward process.
However, I have encountered a stylistic issue. I am using a span with the float property set to right to differentiate between the price and the service description (the price aligns to the right within a div, while the description aligns to the left next to the checkbox). The entire label is positioned using relative positioning. The problem arises when I try to change the color of the label on hover using the pseudo-class; the color change doesn't seem to function correctly on Chrome. Below is a snippet of code that illustrates this problem...
<html>
<head>
<style type="text/css">
div#leftcolumn
{
width:500px;
}
span.right
{
float:right;
}
input, label
{
position:relative;
left:50px;
}
label:hover
{
color:#FF0000;
}
</style>
</head>
<body>
<div id="leftcolumn">
<input id="option1" type="checkbox" /><label for="option1">This is a label... span class="right">and this is the same label</span></label><br/>
<input id="option2" type="checkbox" /><label for="option2">A new label!<span class="right">Y U NO COLOR RIGHT</span></label>
</div>
</body>
After testing this example in Chrome, I have observed some strange hover behavior. However, everything seems to work fine in Firefox and Internet Explorer. Could this issue be a bug in Chrome or a flaw in my coding? Although my actual page validates, I am open to suggestions on a better workaround, such as moving the relative positioning into a div and containing all inputs and labels within that div instead of positioning them individually. I strongly believe that the current setup should function correctly...
Thank you for taking the time to read and potentially help debug this issue.