CODEWITHSUNDEEP
htmlcss
Mohamed Reheem
Mohamed Reheem

Reputation: 31

How I can add td to css style for inputs and its label?

I want to add some inputs in a table for alignment need. But the style did not work and stopped. How I can add td to this css style. For example, something like this:

                <p>Stuff you like:</p>
            <table>
                <tr>
                    <td>
                        <label for="css3">CSS3</label>
                    </td>
                    <td>
                        <input type="checkbox" value="css3" id="css3" /> 
                    </td>
                </tr>
            </table><!-- It does not work-->


            <p><input type="checkbox" value="HTML5" id="html5" />
<label for="html5">HTML5</label></p>
            <p><input type="checkbox" value="JavaScript" id="javascript" />
<label for="javascript">JavaScript</label></p>
            <p><input type="checkbox" value="Other" id="other" /> 
<label for="other">Other</label></p>
<!--But it work-->

/*CSS*/
input:hover + label, input:focus + label,
input + label:hover, input:focus + label{
text-shadow: 1px 1px 3px #000;
color: #2C7AD0; 
}

Upvotes: 0

Views: 781

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201598

Using the table markup, the label element does not match any of your selectors. The label and input elements aren’t siblings at all. You need something rather different. The following works, with the usual CSS Caveats, for the “hover” part:

tr:hover label { ... }

Regarding the “focus” part, I’m afraid you can’t use pure CSS due to structural limitations: you cannot make the focused state of an element affect the rendering of an element before it. You would need to use JavaScript for that.

Upvotes: 1

Chris
Chris

Reputation: 3846

Where is your HTML code? How does it look like? What you try won't bring you the results. Do you put the input into a label tag or upside down? This is how your CSS code looks like. And the "+" definitely is used only in javascript, not CSS.

As you did not post your HTML yet, I can just guess, but your CSS should rather look like:

input:hover label, input:focus label,
input label:hover, input:focus label {
text-shadow: 1px 1px 3px #000;
color: #2C7AD0; 
}

OR most likely

UPDATE (use this, this should work):

input, input:hover, input:focus, label,
label:hover, label:focus {
text-shadow: 1px 1px 3px #000;
color: #2C7AD0; 
}

Upvotes: 2

mfadel
mfadel

Reputation: 897

check this code using jquery

var option = {
  x:      1, 
  y:      2, 
  radius: 3,
  color:  "#ccff00"
}

$("#yourelems").textShadow( option );
$("#yourelems").css("color","red");

Upvotes: 0

Related Questions