Skip to content

Commit

Permalink
Add syntax highlighting to the README.
Browse files Browse the repository at this point in the history
  • Loading branch information
mathiasbynens committed Jun 6, 2011
1 parent 0db4369 commit ed5be6b
Showing 1 changed file with 20 additions and 12 deletions.
32 changes: 20 additions & 12 deletions README.md
Expand Up @@ -8,24 +8,30 @@


### HTML ### HTML


<input type="text" name="name" placeholder="e.g. John Doe"> ``` html
<input type="email" name="email" placeholder="e.g. address@example.ext"> <input type="text" name="name" placeholder="e.g. John Doe">
<input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/"> <input type="email" name="email" placeholder="e.g. address@example.ext">
<input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"> <input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/">
<input type="password" name="password" placeholder="e.g. h4x0rpr00fz"> <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">
<input type="search" name="search" placeholder="Search this site…"> <input type="password" name="password" placeholder="e.g. h4x0rpr00fz">
<textarea name="message" placeholder="Your message goes here"></textarea> <input type="search" name="search" placeholder="Search this site…">
<textarea name="message" placeholder="Your message goes here"></textarea>
```


### jQuery ### jQuery


$('input, textarea').placeholder(); ``` js
$('input, textarea').placeholder();
```


### CSS ### CSS


The plugin automatically adds `class="placeholder"` to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently: The plugin automatically adds `class="placeholder"` to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently:


input, textarea { color: #000; } ``` css
.placeholder { color: #aaa; } input, textarea { color: #000; }
.placeholder { color: #aaa; }
```


## Notes ## Notes


Expand All @@ -34,8 +40,10 @@ The plugin automatically adds `class="placeholder"` to the elements who are curr
* Caches the results of its two feature tests in `jQuery.fn.placeholder.input` and `jQuery.fn.placeholder.textarea`. For example, if `@placeholder` is natively supported for `input` elements, `jQuery.fn.placeholder.input` will be `true`. After loading the plugin, you can re-use these properties in your own code. * Caches the results of its two feature tests in `jQuery.fn.placeholder.input` and `jQuery.fn.placeholder.textarea`. For example, if `@placeholder` is natively supported for `input` elements, `jQuery.fn.placeholder.input` will be `true`. After loading the plugin, you can re-use these properties in your own code.
* Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra `input` element to fake `@placeholder` for password inputs. This means you can safely do stuff like: * Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra `input` element to fake `@placeholder` for password inputs. This means you can safely do stuff like:


<label for="bar">Example label</label> ``` html
<input type="password" placeholder="foo" id="bar"> <label for="bar">Example label</label>
<input type="password" placeholder="foo" id="bar">
```


And the `<label>` will always point to the `<input>` element you’d expect. Also, all CSS styles based on the ID will just work™. And the `<label>` will always point to the `<input>` element you’d expect. Also, all CSS styles based on the ID will just work™.


Expand Down

0 comments on commit ed5be6b

Please sign in to comment.