From 8ec1770750b7afcf6983aa2ec1f504425bda07e2 Mon Sep 17 00:00:00 2001
From: Pascal Borreli <pascal@borreli.com>
Date: Tue, 13 May 2014 07:55:05 +0100
Subject: [PATCH 1/2] Fixed typo

---
 _includes/select.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/select.html b/_includes/select.html
index 22c4f51..da01a42 100644
--- a/_includes/select.html
+++ b/_includes/select.html
@@ -1,6 +1,6 @@
 <label class="select">
   <select>
-    <option checked>Open this select menu</option>
+    <option selected>Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>

From 854943e14cb04a94db22cc9fa78d6133511b95f5 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 14 May 2014 01:51:42 -0700
Subject: [PATCH 2/2] focus, faqs, changelog, comment out hover

---
 _includes/file.html   |  3 ++-
 _layouts/default.html |  3 +--
 index.md              | 56 ++++++++++++++++++++++++++++++++++++-------
 wtf-forms.css         | 46 +++++++++++++++++++++++++----------
 4 files changed, 85 insertions(+), 23 deletions(-)

diff --git a/_includes/file.html b/_includes/file.html
index 4152681..f141103 100644
--- a/_includes/file.html
+++ b/_includes/file.html
@@ -1,3 +1,4 @@
 <label class="file">
-  <input type="file">
+  <input type="file" id="file">
+  <span class="file-custom"></span>
 </label>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 8ba1c7f..27be7af 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -12,8 +12,7 @@
 
     <link rel="stylesheet" href="wtf-forms.css">
     <link rel="stylesheet" href="docs.css">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Mono&amp;subset=latin,cyrillic">
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic|PT+Mono&amp;subset=latin,cyrillic">
 
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/index.md b/index.md
index fca99d5..abcef7e 100644
--- a/index.md
+++ b/index.md
@@ -4,16 +4,16 @@ layout: default
 
 ### Checkboxes and radios
 
-<div class="controls-stacked">
+<form class="controls-stacked">
   {% include checkbox.html %}
-</div>
+</form>
 ```html
 {% include checkbox.html %}
 ```
 
-<div class="controls-stacked">
+<form class="controls-stacked">
   {% include radio.html %}
-</div>
+</form>
 ```html
 {% include radio.html %}
 ```
@@ -31,9 +31,9 @@ With the sibling selector (`~`), we use the `:checked` state to trigger a makesh
 
 ### Select menu
 
-<div class="controls-stacked">
+<form class="controls-stacked">
   {% include select.html %}
-</div>
+</form>
 ```html
 {% include select.html %}
 ```
@@ -59,9 +59,9 @@ Any ideas on improving these are most welcome.
 
 ### File browser
 
-<div class="controls-stacked">
+<form class="controls-stacked">
   {% include file.html %}
-</div>
+</form>
 ```html
 {% include file.html %}
 ```
@@ -75,3 +75,43 @@ The file input is the most gnarly of the bunch. Here's how it works:
 * We declare a `height` on the `<input>` for proper spacing for surrounding content.
 
 In other words, it's an entirely custom element, all generated via CSS.
+
+**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
+
+
+### FAQs
+
+#### What about every other form control?
+For the time being, **WTF, forms?** is limited to checkboxes, radio buttons, select menus, and file inputs. Additional custom inputs will depend on browser support.
+
+#### Why are there no `for` attributes?
+We nest our `<input>`s and `<select>`s within a `<label>`, so there's no need to specify a `for` attribute as the browser will automatically associate the two.
+
+#### What about `hover` states?
+Basic hover styles have been included, but they've been commented out because they are sticky on iOS. Uncomment if you really need it.
+
+#### Does this require JavaScript?
+Not for the time being, however, the file input might be better off with it.
+
+#### Will this be added to Bootstrap?
+Possibly, but not until v4 at the earliest.
+
+#### Is this screen reader friendly?
+Honestly, no idea right now.
+
+
+### Changelog
+
+*WTF, forms?* utilizes [SemVer](http://semver.org) for versioning releases.
+
+#### v1: May 12, 2014
+Initial release.
+
+#### v2: May 14, 2014
+* New focus styles. [Fixes #3.](https://github.com/mdo/wtf-forms/issues/3)
+* Commented out hover styles for now because iOS makes them sticky, and the hover styles weren't particularly useful.
+* File inputs now require a `<span>` within `.file`. This was added for proper focus state support as a `<label>` has no idea if the child `<input>` has focus or not.
+* Added `z-index: -1;` to checkboxes and radios to avoid a cursor change when hovering where the orignal input rendered. [Fixes #10.](https://github.com/mdo/wtf-forms/pull/10)
+* Added FAQs and this changelog to the project page.
+
+For issues, milestones, and more, visit the [GitHub project]({{ site.repo }}).
diff --git a/wtf-forms.css b/wtf-forms.css
index 405917c..3de3d79 100644
--- a/wtf-forms.css
+++ b/wtf-forms.css
@@ -21,6 +21,7 @@
 .control input {
   position: absolute;
   opacity: 0;
+  z-index: -1; /* Put the input behind the label so it doesn't overlay text */
 }
 .control-indicator {
   position: absolute;
@@ -36,11 +37,17 @@
 }
 
 /* Hover state */
-.control:hover .control-indicator,
-.control:focus .control-indicator {
+/* Uncomment if you need it, but be aware of the sticky iOS states.
+.control:hover .control-indicator {
   color: #fff;
   background-color: #ccc;
 }
+*/
+
+/* Focus */
+.control input:focus ~ .control-indicator {
+  box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+}
 
 /* Checked state */
 .control input:checked ~ .control-indicator {
@@ -111,11 +118,20 @@
   border-bottom: .35rem solid transparent;
   border-left: .35rem solid transparent;
 }
-/* States */
-.select select:hover,
-.select select:focus {
+
+/* Hover state */
+/* Uncomment if you need it, but be aware of the sticky iOS states.
+.select select:hover {
   background-color: #ddd;
 }
+*/
+
+/* Focus */
+.select select:focus {
+  box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+}
+
+/* Active/open */
 .select select:active {
   color: #fff;
   background-color: #0074d9;
@@ -181,13 +197,12 @@
   filter: alpha(opacity=0);
   opacity: 0;
 }
-.file:after {
+.file-custom {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 5;
-  content: "Choose file...";
   height: 2.5rem;
   padding: .5rem 1rem;
   line-height: 1.5;
@@ -197,11 +212,14 @@
   border-radius: .25rem;
   box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);
 }
-.file:before {
+.file-custom:after {
+  content: "Choose file...";
+}
+.file-custom:before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  top: -.075rem;
+  right: -.075rem;
+  bottom: -.075rem;
   z-index: 6;
   display: block;
   content: "Browse";
@@ -214,6 +232,11 @@
   border-radius: 0 .25rem .25rem 0;
 }
 
+/* Focus */
+.file input:focus ~ .file-custom {
+  box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+}
+
 
 
 /*
@@ -229,4 +252,3 @@
 .controls-stacked .control + .control {
   margin-top: .5rem;
 }
-