Skip to content
This repository has been archived by the owner on Sep 28, 2020. It is now read-only.

Commit

Permalink
merge v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed May 14, 2014
2 parents f35b9e7 + 854943e commit aa7ce06
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 30 deletions.
85 changes: 67 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand Down Expand Up @@ -48,20 +47,20 @@ <h1>WTF, forms?</h1>
<div class="container">
<h3>Checkboxes and radios</h3>

<div class="controls-stacked">
<form class="controls-stacked">
<label class="control checkbox">
<input type="checkbox">
<span class="control-indicator"></span>
Check this custom checkbox
</label>
</div>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;control checkbox&quot;</span><span class="nt">&gt;</span>
</form>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;control checkbox&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;checkbox&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;control-indicator&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Check this custom checkbox
<span class="nt">&lt;/label&gt;</span>
</code></pre></div>
<div class="controls-stacked">
<form class="controls-stacked">
<label class="control radio">
<input type="radio" id="radio1" name="radio">
<span class="control-indicator"></span>
Expand All @@ -72,8 +71,8 @@ <h3>Checkboxes and radios</h3>
<span class="control-indicator"></span>
Or toggle this other custom radio
</label>
</div>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;control radio&quot;</span><span class="nt">&gt;</span>
</form>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;control radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">id=</span><span class="s">&quot;radio1&quot;</span> <span class="na">name=</span><span class="s">&quot;radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;control-indicator&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Toggle this custom radio
Expand All @@ -98,19 +97,19 @@ <h3>Checkboxes and radios</h3>

<h3>Select menu</h3>

<div class="controls-stacked">
<form class="controls-stacked">
<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>
</select>
</label>
</div>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;select&quot;</span><span class="nt">&gt;</span>
</form>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;select&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;select&gt;</span>
<span class="nt">&lt;option</span> <span class="na">checked</span><span class="nt">&gt;</span>Open this select menu<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">selected</span><span class="nt">&gt;</span>Open this select menu<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;1&quot;</span><span class="nt">&gt;</span>One<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;2&quot;</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;3&quot;</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/option&gt;</span>
Expand Down Expand Up @@ -141,13 +140,15 @@ <h3>Select menu</h3>

<h3>File browser</h3>

<div class="controls-stacked">
<form class="controls-stacked">
<label class="file">
<input type="file">
<input type="file" id="file">
<span class="file-custom"></span>
</label>
</div>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;file&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span><span class="nt">&gt;</span>
</form>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;file&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span> <span class="na">id=</span><span class="s">&quot;file&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;file-custom&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
</code></pre></div>
<p>The file input is the most gnarly of the bunch. Here&#39;s how it works:</p>
Expand All @@ -162,6 +163,54 @@ <h3>File browser</h3>

<p>In other words, it&#39;s an entirely custom element, all generated via CSS.</p>

<p><strong>Heads up!</strong> The custom file input is currently unable to update the <em>Choose file...</em> text with the filename. Without JavaScript, this might not be possible to change, but I&#39;m open to ideas.</p>

<h3>FAQs</h3>

<h4>What about every other form control?</h4>

<p>For the time being, <strong>WTF, forms?</strong> is limited to checkboxes, radio buttons, select menus, and file inputs. Additional custom inputs will depend on browser support.</p>

<h4>Why are there no <code>for</code> attributes?</h4>

<p>We nest our <code>&lt;input&gt;</code>s and <code>&lt;select&gt;</code>s within a <code>&lt;label&gt;</code>, so there&#39;s no need to specify a <code>for</code> attribute as the browser will automatically associate the two.</p>

<h4>What about <code>hover</code> states?</h4>

<p>Basic hover styles have been included, but they&#39;ve been commented out because they are sticky on iOS. Uncomment if you really need it.</p>

<h4>Does this require JavaScript?</h4>

<p>Not for the time being, however, the file input might be better off with it.</p>

<h4>Will this be added to Bootstrap?</h4>

<p>Possibly, but not until v4 at the earliest.</p>

<h4>Is this screen reader friendly?</h4>

<p>Honestly, no idea right now.</p>

<h3>Changelog</h3>

<p><em>WTF, forms?</em> utilizes <a href="http://semver.org">SemVer</a> for versioning releases.</p>

<h4>v1: May 12, 2014</h4>

<p>Initial release.</p>

<h4>v2: May 14, 2014</h4>

<ul>
<li>New focus styles. <a href="https://github.com/mdo/wtf-forms/issues/3">Fixes #3.</a></li>
<li>Commented out hover styles for now because iOS makes them sticky, and the hover styles weren&#39;t particularly useful.</li>
<li>File inputs now require a <code>&lt;span&gt;</code> within <code>.file</code>. This was added for proper focus state support as a <code>&lt;label&gt;</code> has no idea if the child <code>&lt;input&gt;</code> has focus or not.</li>
<li>Added <code>z-index: -1;</code> to checkboxes and radios to avoid a cursor change when hovering where the orignal input rendered. <a href="https://github.com/mdo/wtf-forms/pull/10">Fixes #10.</a></li>
<li>Added FAQs and this changelog to the project page.</li>
</ul>

<p>For issues, milestones, and more, visit the <a href="https://github.com/mdo/wtf-forms">GitHub project</a>.</p>

</div>

<footer class="footer">
Expand Down
46 changes: 34 additions & 12 deletions wtf-forms.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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";
Expand All @@ -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;
}



/*
Expand All @@ -229,4 +252,3 @@
.controls-stacked .control + .control {
margin-top: .5rem;
}

0 comments on commit aa7ce06

Please sign in to comment.