This is an attempt to make a clearable textbox ( a textbox with a clear button , normally comes for the input type="search". ) .
Forked from Shidhin's Pen HTML Textbox with a clear button in Pure CSS and without JavaScript.
Forked from anonymous/HTML-Textbox-with-a-clear-button-in-Pure-CSS-and-without-JavaScript.markdown
Last active
August 29, 2015 14:10
-
-
Save jolij/3ae9bab384e6b7512956 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1> | |
| Textbox with a clear button completely in CSS <br> <span class="redfamily">< 0 lines of JavaScript ></span> | |
| </h1> | |
| <div class="search-wrapper"> | |
| <form> | |
| <input type="text" name="focus" required class="search-box" placeholder="Enter search term" /> | |
| <button class="close-icon" type="reset"></button> | |
| </form> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 0 Lines of JavaScript |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #f1f1f1; | |
| font-family: Helvetica,Arial,Verdana; | |
| } | |
| h1 { | |
| color: green; | |
| text-align: center; | |
| } | |
| .redfamily { | |
| color: red; | |
| } | |
| .search-box,.close-icon,.search-wrapper { | |
| position: relative; | |
| padding: 10px; | |
| } | |
| .search-wrapper { | |
| width: 500px; | |
| margin: auto; | |
| margin-top: 50px; | |
| } | |
| .search-box { | |
| width: 80%; | |
| border: 1px solid #ccc; | |
| outline: 0; | |
| border-radius: 15px; | |
| } | |
| .search-box:focus { | |
| box-shadow: 0 0 15px 5px #b0e0ee; | |
| border: 2px solid #bebede; | |
| } | |
| .close-icon { | |
| border:1px solid transparent; | |
| background-color: transparent; | |
| display: inline-block; | |
| vertical-align: middle; | |
| outline: 0; | |
| cursor: pointer; | |
| } | |
| .close-icon:after { | |
| content: "X"; | |
| display: block; | |
| width: 15px; | |
| height: 15px; | |
| position: absolute; | |
| background-color: #FA9595; | |
| z-index:1; | |
| right: 35px; | |
| top: 0; | |
| bottom: 0; | |
| margin: auto; | |
| padding: 2px; | |
| border-radius: 50%; | |
| text-align: center; | |
| color: white; | |
| font-weight: normal; | |
| font-size: 12px; | |
| box-shadow: 0 0 2px #E50F0F; | |
| cursor: pointer; | |
| } | |
| .search-box:not(:valid) ~ .close-icon { | |
| display: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment