I want to have a nice little icon that, when clicked will clear the text in the <INPUT> box.
This is to save space rather than having a clear link outside of the input box.
My CSS skills are weak... Here is a screenshot photo of how the iPhone looks.
This question is related to
javascript
iphone
html
css
The answer is
I got a creative solution I think you are looking for
$('#clear').click(function() {_x000D_
$('#input-outer input').val('');_x000D_
});body {_x000D_
font-family: "Tahoma";_x000D_
}_x000D_
#input-outer {_x000D_
height: 2em;_x000D_
width: 15em;_x000D_
border: 1px #e7e7e7 solid;_x000D_
border-radius: 20px;_x000D_
}_x000D_
#input-outer input {_x000D_
height: 2em;_x000D_
width: 80%;_x000D_
border: 0px;_x000D_
outline: none;_x000D_
margin: 0 0 0 10px;_x000D_
border-radius: 20px;_x000D_
color: #666;_x000D_
}_x000D_
#clear {_x000D_
position: relative;_x000D_
float: right;_x000D_
height: 20px;_x000D_
width: 20px;_x000D_
top: 5px;_x000D_
right: 5px;_x000D_
border-radius: 20px;_x000D_
background: #f1f1f1;_x000D_
color: white;_x000D_
font-weight: bold;_x000D_
text-align: center;_x000D_
cursor: pointer;_x000D_
}_x000D_
#clear:hover {_x000D_
background: #ccc;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="input-outer">_x000D_
<input type="text">_x000D_
<div id="clear">_x000D_
X_x000D_
</div>_x000D_
</div>Firefox doesn't seem to support the clear search field functionality... I found this pure CSS solution that works nicely: Textbox with a clear button completely in CSS | Codepen | 2013. The magic happens at
.search-box:not(:valid) ~ .close-icon {
display: none;
}
body {
background-color: #f1f1f1;
font-family: Helvetica,Arial,Verdana;
}
h2 {
color: green;
text-align: center;
}
.redfamily {
color: red;
}
.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
}
.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;
}<h2>
Textbox with a clear button completely in CSS <br> <span class="redfamily">< 0 lines of JavaScript ></span>
</h2>
<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>I needed more functionality and added this jQuery in my code:
$('.close-icon').click(function(){ /* my code */ });
Nowadays with HTML5, it's pretty simple:
<input type="search" placeholder="Search..."/>
Most modern browsers will automatically render a usable clear button in the field by default.
(If you use Bootstrap, you'll have to add an override to your css file to make it show)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Safari/WebKit browsers can also provide extra features when using type="search", like results=5 and autosave="...", but they also override many of your styles (e.g. height, borders) . To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:
input[type=search] {
-webkit-appearance: none;
}
See css-tricks.com for more info about the features provided by type="search".
It is so simple in HTML5
<input type="search">
This will do your job!
Of course the best approach is to use the ever-more-supported <input type="search" />.
Anyway for a bit of coding fun I thought that it could be achieved also using the form's reset button, and this is the working result (it is worth noting that you cannot have other inputs in the form but the search field with this approach, or the reset button will erase them too), no javascript needed:
form{
position: relative;
width: 200px;
}
form input {
width: 100%;
padding-right: 20px;
box-sizing: border-box;
}
form input:placeholder-shown + button{
opacity: 0;
pointer-events: none;
}
form button {
position: absolute;
border: none;
display: block;
width: 15px;
height: 15px;
line-height: 16px;
font-size: 12px;
border-radius: 50%;
top: 0;
bottom: 0;
right: 5px;
margin: auto;
background: #ddd;
padding: 0;
outline: none;
cursor: pointer;
transition: .1s;
}<form>
<input type="text" placeholder=" " />
<button type="reset">×</button>
</form>Maybe this simple solution can help:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>You can't actually put it inside the text box unfortunately, only make it look like its inside it, which unfortunately means some css is needed :P
Theory is wrap the input in a div, take all the borders and backgrounds off the input, then style the div up to look like the box. Then, drop in your button after the input box in the code and the jobs a good'un.
Once you've got it to work anyway ;)
Check out our jQuery-ClearSearch plugin. It's a configurable jQuery plugin - adapting it to your needs by styling the input field is straightforward. Just use it as follows:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
? Example: http://jsfiddle.net/wldaunfr/FERw3/
HTML5 introduces the 'search' input type that I believe does what you want.
<input type="search" />
Here's a live example.
@Mahmoud Ali Kaseem
I have just changed some CSS to make it look different and added focus();
https://jsfiddle.net/xn9eogmx/81/
$('#clear').click(function() {_x000D_
$('#input-outer input').val('');_x000D_
$('#input-outer input').focus();_x000D_
});body {_x000D_
font-family: "Arial";_x000D_
font-size: 14px;_x000D_
}_x000D_
#input-outer {_x000D_
height: 2em;_x000D_
width: 15em;_x000D_
border: 1px #777 solid;_x000D_
position: relative;_x000D_
padding: 0px;_x000D_
border-radius: 4px;_x000D_
}_x000D_
#input-outer input {_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
border: 0px;_x000D_
outline: none;_x000D_
margin: 0 0 0 0px;_x000D_
color: #666;_x000D_
box-sizing: border-box;_x000D_
padding: 5px;_x000D_
padding-right: 35px;_x000D_
border-radius: 4px;_x000D_
}_x000D_
#clear {_x000D_
position: absolute;_x000D_
float: right;_x000D_
height: 2em;_x000D_
width: 2em;_x000D_
top: 0px;_x000D_
right: 0px;_x000D_
background: #aaa;_x000D_
color: white;_x000D_
text-align: center;_x000D_
cursor: pointer;_x000D_
border-radius: 0px 4px 4px 0px;_x000D_
}_x000D_
#clear:after {_x000D_
content: "\274c";_x000D_
position: absolute;_x000D_
top: 4px;_x000D_
right: 7px;_x000D_
}_x000D_
#clear:hover,_x000D_
#clear:focus {_x000D_
background: #888;_x000D_
}_x000D_
#clear:active {_x000D_
background: #666;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="input-outer">_x000D_
<input type="text">_x000D_
<div id="clear"></div>_x000D_
</div>Source: Stackoverflow.com