0

I can`t find out why this workes: 

input[ type = "text" ]:last-of-type:focus{ border:1px solid red; }

but this doesn`t work: 

input[ type = "checkbox" ]:last-of-type:checked{ border:1px solid red; }

The "border" property is just an example, any other properties is also, dismissed!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
BiJO0L
  • 3
  • 1
  • 4
  • What browsers have you tested this with? Have you checked that you can set a border on checkbox in that browser in the first place? What does your markup look like? – Quentin Mar 25 '11 at 13:25
  • Mozilla Firefox, IE, Chrome, Safari, Opera; this is just an example, man! You can test any property, not only border! No property is done through the second code! – BiJO0L Mar 25 '11 at 13:27
  • http://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css – jswolf19 Mar 25 '11 at 13:30

1 Answers1

1

Given:

<!DOCTYPE HTML>
<meta charset="utf-8"/>
<title>Testing</title>
<style>
input[ type = "checkbox" ]:last-of-type:checked{ top: 100px;  }
input[type='checkbox'] { position: absolute; top: 200px; }
</style>
<h1>Testing</h1>
<form>
        <input type="submit" />
        <input type="checkbox" />
</form>

It works perfectly in Chrome for me. Presumably you didn't try it with any properties that are respected on checkboxes in the browsers you were testing in.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • It`s better to change my question, why the third line on "Style" does not work: Testing

    Hello!

     – BiJO0L Mar 25 '11 at 14:30
  • You mean, you see the

    tag in red, by clicking the second label?!!

     – BiJO0L Mar 25 '11 at 14:42
  • @BiJO0L,ok, that works in firefox, but not chrome... I added a checked to the second checkbox before, so chrome uses the initial checked value to determine the style of the p tag but doesn't update it on changes to the state of the checkbox. Sounds like a bug to report. – jswolf19 Mar 25 '11 at 15:03