Skip to content

Add support for input tags inside label tags #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nickclyde wants to merge 2 commits into from
Closed

Add support for input tags inside label tags #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f7d917
Add support for input tags inside label tags
nickclyde Mar 11, 2016
c531886
Cleanup
nickclyde Mar 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 40 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,22 @@ Next, everything is based on code convention. Here is checkbox markup from Boots
````

We have to alter it a bit:

````html
<form role="form">
...
<div class="checkbox">
<label>
<input type="checkbox">
<span>Check me out</span>
</label>
</div>
...
</form>
````

Or, use an alternative form:

````html
<form role="form">
...
Expand All @@ -43,7 +59,7 @@ We have to alter it a bit:
...
</form>
````
That's it. It will work. But it **will not** work if you nest input inside label or put label before input.
That's it. It will work.

If you want to enable **Opera 12** and earlier support just add class `styled` to `input` element:
````html
Expand All @@ -63,7 +79,29 @@ Browser support
Radios
------------

It's the same for radios. Markup has to be the following:
It's the same for radios. Markup has to be one of the following:

````html
<form role="form">
...
<div class="radio">
<label>
<input type="radio" value="option1">
<span>One</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="option2">
<span>Two</span>
</label>
</div>
...
</form>
````

Or:

````html
<form role="form">
...
Expand Down
Loading