I have code for an image gallery created with bootstrap where I'd like a delete button on rollover. However, the div or button (whatever works) is absolutely positioned over an image inside a label, where the whole image is clickable.
My codepen for this is here - https://codepen.io/leecolarelli/pen/ZqMmrw
I have tried placing the <i class="fa fa-times"></i> inside a div or a button, and having that div or button outside of the label tag, but it still didn't work.
How can i make the cross clickable?
<!-- Start of: Image Entry -->
<div class="col-xs-6 col-sm-4 col-md-3 text-center">
<label class="image-checkbox">
<img class="img-fluid" src="https://via.placeholder.com/600x400" />
<input type="radio" id="" name="presetimage" value="" />
<i class="fa fa-check"></i>
<i class="fa fa-times"></i>
</label>
</div>
<!-- End of: Image Entry -->
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
position: relative;
input[type="checkbox"] {
display: none;
}
input[type="radio"] {
display: none;
}
&:hover {
.fa-times {
visibility: visible;
}
}
&.image-checkbox-checked {
border-color: #4783B0;
.fa-check {
visibility: visible;
}
}
.fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
visibility: hidden;
&.fa-check {
top: 0;
right: 0;
}
&.fa-times {
top: 0;
left: 0;
}
}
}
$(function () {
$('input[name="presetimage"]').on('click', function() {
$(".image-checkbox-checked").removeClass("image-checkbox-checked");
$(this).parent().toggleClass("image-checkbox-checked");
});
})
Cross mark can be made clickable as follows,
$('.fa-times').on('click', function(e){
alert("Cross mark clicked");
});
And also comment the css border color as follows as it appear whole image is selected
&.image-checkbox-checked {
/*border-color: #4783B0;*/
.fa-check {
visibility: visible;
}
}
Slinding Feedback Form isn't responsive at the moment. I've tested it on the phone and the text goes over the screen.
I've changed the CSS #mrova-feedback to: max-with:90%; still not working.
I have tried nearly everything and my issue is that I can not make it responsive.
What am I doing wrong?
Any thoughts?
(function($) {
$.fn.vAlign = function() {
return this.each(function(i) {
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
});
};
$.fn.toggleClick = function() {
var functions = arguments;
return this.click(function() {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
};
})(jQuery);
$(window).load(function() {
//cache
$img_control = $("#mrova-img-control");
$mrova_feedback = $('#mrova-feedback');
$mrova_contactform = $('#mrova-contactform');
//setback to block state and vertical align to center
$mrova_feedback.vAlign()
.css({
'display': 'block',
'height': $mrova_feedback.outerHeight()
});
//Aligning feedback button to center with the parent div
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-2px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
//Form handling
$('#mrova-sendbutton').click(function() {
var url = 'send.php';
var error = 0;
$('.required', $mrova_contactform).each(function(i) {
if ($(this).val() === '') {
error++;
}
});
// each
if (error > 0) {
alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
} else {
$str = $mrova_contactform.serialize();
//submit the form
$.ajax({
type: "GET",
url: url,
data: $str,
success: function(data) {
if (data == 'success') {
// show thank you
$('#mrova-contact-thankyou').show();
$mrova_contactform.hide();
} else {
alert('Unable to send your message. Please try again.');
}
}
});
//$.ajax
}
return false;
});
});
label {
display: block;
padding-bottom: 5px;
margin-top: 20px;
}
#mrova-feedback {
display: hidden;
width: 420px;
position: fixed;
right: -462px;
border: 1px solid #3cb58c;
padding: 8px 20px;
background-color: #fff;
}
#mrova-contactform ul {
margin: 0;
padding: 0;
}
#mrova-contactform input,
#mrova-contactform textarea {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
}
#mrova-contactform ul li {
list-style: none;
padding-bottom: 20px;
}
#mrova-img-control {
cursor: pointer;
position: absolute;
left: -52px;
width: 52px;
background: transparent url('feedback_buttons/feedback.jpg');
height: 168px;
}
#mrova-contactform #mrova-sendbutton {
width: 60px;
background: #db4f4a;
color: #fff;
cursor: pointer;
padding: 5px 10px;
border: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
Feedback Form Demo
</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- Files For mRova Feedback Form [Dependency: jQuery] -->
<script src="mrova-feedback-form.js" type="text/javascript"></script>
<link rel="stylesheet" href="mrova-feedback-form.css" type="text/css" />
<!-- END -->
<!-- Just For Demo -->
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: #f2f2f2;
font-family: helvetica, arial, tahoma, verdana, sans-serif;
}
h1 {
text-align: center;
margin-top: 40px;
color: #333;
}
</style>
<!-- END -->
</head>
<body>
<h1>Free Feedback Form</h1>
<!--Feedback Form HTML START -->
<div id="mrova-feedback">
<div id="mrova-contact-thankyou" style="display: none;">
Thank you. We'hv received your feedback.
</div>
<div id="mrova-form">
<form id="mrova-contactform" action="#" method="post">
<ul>
<li>
<label for="mrova-name">Your Name*</label> <input type="text" name="mrova-name" class="required" id="mrova-name" value="">
</li>
<li>
<label for="mrova-email">Email*</label> <input type="text" name="mrova-email" class="required" id="mrova-email" value="">
</li>
<li>
<label for="mrova-message">Message*</label>
<textarea class="required" id="mrova-message" name="mrova-message" rows="8" cols="30"></textarea>
</li>
</ul>
<input type="submit" value="Send" id="mrova-sendbutton" name="mrova-sendbutton">
</form>
</div>
<div id="mrova-img-control"></div>
</div>
<!-- Feedback Form HTML END -->
</body>
</html>
Many things are wrong.
I've tweaked your code and improved it.
The edit was made only on your HTML and CSS.
* {
box-sizing: border-box;
}
body{
background-color: #f2f2f2;
font-family: helvetica,arial,tahoma,verdana,sans-serif;
}
h1{
text-align: center;
margin-top: 40px;
color: #333;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #db4f4a;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
/*background-color: #f2f2f2;*/
padding: 20px;
display: hidden;
/*width: 420px;*/
/*position: fixed;*/
/*right: -462px;*/
border: 1px solid #3cb58c;
/*padding: 8px 20px;*/
background-color: #fff;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h1>ReFree Feedback Form</h1>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name*</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name*</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="message">Message*</label>
</div>
<div class="col-75">
<textarea id="message" name="message" placeholder="Write youre message.." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Well forget my HTML & CSS code
the problem in this script:
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-2px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
The script after modification:
You must change the value of 'right': '-2px'.
I think -120 is very appropriate, try it and tell me the result.
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-120px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
Do not forget this tag to make the page responsive :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag should be in <head>
Here is the scenario.
Step 1- Click action opens a drop down that can be closed on click of anywhere except the dropdown area and action text.
Problem 1- I want this also to get close on click of action text only. So the solution will be it get close on click of area anywhere except dropdown area and also on click of action text.
Step 2 -
On click of multiple action text opens multiple dropdowns .
Problem 2- I want it the way that if one gets open other gets close.
Code:
$('.ToggleClass a').click(function(ev) {
$(this).next('.ActionDropDown').fadeIn(500);
});
$(document).click(function(e) {
e.stopPropagation();
var container = $(".ToggleClass");
//check if the clicked area is dropDown or not
if (container.has(e.target).length === 0) {
$('.ActionDropDown').fadeOut(500);
}
});
* {
margin: 0px;
padding: 0px;
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: arial;
}
a {
text-decoration: none;
}
body,
html {
width: 100%;
height: 100%;
background: #cbeeff
}
.row1 {
width: 100%;
background: #fff;
margin: 5px 0;
}
.row1-2 {
width: 50%;
position: relative;
text-align: center;
padding: 10px 0;
border-right: 2px solid #000
}
.row1-2+.row1-2 {
border-right: 0px;
}
.row1-2 a {
color: #ff4886;
float: none;
}
.ActionDropDown {
position: absolute;
background: #7bd4ff;
border: 2px solid #000;
top: 20px;
padding: 30px 10px;
display: none;
z-index: 9;
right: 0px;
left: 0px;
max-width: 180px;
margin: 0px auto;
}
.InfoDiv{ width:100%; padding:10px; background:#ffadc9;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-----Row 1--------->
<div class="row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 1--------->
<!-----Row 2--------->
<div class="row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 2--------->
<!-----Row 3--------->
<div class="row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 3--------->
<div class="InfoDiv">
<b>Info:</b> Right now click on Action on each row open drop down multiple times. What I want is when one drop down is open on click of action , the other drop down if open should get close.
</div>
see snippet below or jsfiddle
added this line to your jQuery :
$(this).parents(".row").siblings(".row").find(".ActionDropDown").fadeOut(500)
also added a common class to all parent rows ( class row ) in your HTML
you need to search the other ActionDropDown and close it the same time you open another one
EDIT : added new JQ code for click outside the container + explanation
you can add a new condition to the IF
&& $(".ActionDropDown").has(e.target).length === 0) -> if the clicked element is not a descendant of ActionDropDown . only if you need it
see updated fiddle or snippet below
EDIT2 : added condition to check if dropdown is open when click on the same Action .
var dropDown = $(this).next('.ActionDropDown')
if ($(dropDown).is(":visible")) {
$(dropDown).fadeOut(500)
} else {
$(dropDown).fadeIn(500)
}
see snippet below or the updated fiddle
$('.ToggleClass a').click(function(ev) {
var dropDown = $(this).next('.ActionDropDown')
if ($(dropDown).is(":visible")) {
$(dropDown).fadeOut(500)
} else {
$(dropDown).fadeIn(500)
}
$(this).parents(".row").siblings(".row").find(".ActionDropDown:visible").fadeOut(500)
});
$(document).mouseup(function (e)
{
if (!$(".ActionDropDown").is(e.target) ) // if the target of the click is not the dropDown
{
$(".ActionDropDown").fadeOut(500);
}
});
* {
margin: 0px;
padding: 0px;
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: arial;
}
a {
text-decoration: none;
}
body,
html {
width: 100%;
height: 100%;
background: #cbeeff
}
.row1 {
width: 100%;
background: #fff;
margin: 5px 0;
}
.row1-2 {
width: 50%;
position: relative;
text-align: center;
padding: 10px 0;
border-right: 2px solid #000
}
.row1-2+.row1-2 {
border-right: 0px;
}
.row1-2 a {
color: #ff4886;
float: none;
}
.ActionDropDown {
position: absolute;
background: #7bd4ff;
border: 2px solid #000;
top: 20px;
padding: 30px 10px;
display: none;
z-index: 9;
right: 0px;
left: 0px;
max-width: 180px;
margin: 0px auto;
}
.InfoDiv{ width:100%; padding:10px; background:#ffadc9;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-----Row 1--------->
<div class="row row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 1--------->
<!-----Row 2--------->
<div class="row row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 2--------->
<!-----Row 3--------->
<div class="row row1">
<div class="row1-2">Simple Text</div>
<div class="row1-2 ToggleClass"> Action
<div class="ActionDropDown">
I am a Drop Down !
</div>
</div>
</div>
<!-----Row 3--------->
<div class="InfoDiv">
<b>Info:</b> Right now click on Action on each row open drop down multiple times. What I want is when one drop down is open on click of action , the other drop down if open should get close.
</div>
I'm using blueimp's fileupload javascript widget and jQuery 1.9.0 for uploading files to a server and I have an event not being triggered in IE8, which is one of the required browsers for my project.
So because of this I can never open the window for browsing for the files. If I do a $('#fileupload').click() from the IE8 console, it works, but I didn't success in the code.
I think this is happening because of the bubbling of the event, but I'm showing you the code for deciding for yourselves. I think also that styles are importante to this issue because maybe the styled button I'm using over the real fileupload widget must be overlapping it. Maybe css styles like opacity and position matter.
Html:
<form id="supportForm">
<div class="formTable">
<div class="formRow">
<label>User:</label>
<input name="user" type="text" class="form-control validate[required]" placeholder="John Smith">
</div>
<div class="formRow">
<label>Phone:</label>
<input name="phone" type="tel" class="form-control validate[required]" placeholder="Ej: 881243989">
</div>
<!-- ... -->
<!-- Some inputs and stuff -->
<!-- ... -->
<div class="formRow">
<label>Attached files:</label>
<div class="formCell">
<span class="btn btn-default fileinput-button">
<span>Browse</span>
<input id="fileupload" type="file" name="files[]" data-url="../server/upload.html" class="submitFilesButton" multiple="">
</span>
</div>
</div>
<div class="formRow">
<label></label>
<div id="additional" class="formCell">
</div>
</div>
<div class="formRow">
<label></label>
<div class="formCell">
<button id="remedyButton" type="submit" class="btn btn-primary">Send</button>
<button id="resetButton" type="reset" class="btn btn-default">Clean</button>
</div>
</div>
</div>
</form>
Javascript:
$(document).ready(function() {
upload_comp = $('#fileupload')
.fileupload({ // Widget options
singleFileUploads : false,
autoUpload : false,
dataType : 'json'
})
.on("fileuploadadd",
function(e, data) { // Function for adding files after opening the browse window
if (data.files.length > 0) {
$('input[type=file]').css('color', 'transparent');
}
// Creating divs for the selected files in the previous browse window
for ( var i = 0; i < data.files.length; i++) {
var name = $('<div></div>').text(data.files[i].name);
var icon = $('<span class="fa fa-2x fa-trash" data-toggle="tooltip" data-placement="bottom" title="Delete">');
icon.click(function() {
// This handler creates a button for removing the actual file
for ( var k = 0; k < fileList.length; k++) {
if (fileList[k].name == $(this).parent().text()) {
fileList.splice(k, 1);
break;
}
}
$(this).parent().remove();
});
fileDiv = $('<div class="item">').wrapInner(name).append(icon);
fileDiv.appendTo($('#additional'));
fileList.push(data.files[i]);
}
//createTooltip($('.fa-trash'));
});
if (isNavigator(CONSTANTS.BROWSER.IE8)) {
// Maybe could use something here and force the click()
// But my current solution creates an infinite loop
}
});
Css:
/* These are specifically for IE8 and are located in ie8.css */
DIV.formRow > * {
width: auto;
}
INPUT[type=file] {
display : none;
}
/* These are for all browsers in another css file, also for IE8 when there is no rule in the previous file */
.formTable {
border-spacing:1em;
display: table;
width: 45em;
min-width:45em;
margin: 0 auto;
}
div.formRow {
display: table-row;
}
div.formRow > label, #additional {
width: 35%;
}
div.formRow > * {
display: table-cell;
width: 100%;
}
div.formCell {
display: table-cell;
width: 100%;
}
#fileupload {
float:left;
top: 0;
right: 0;
left: 0;
margin: 0;
position: absolute;
width: 100%;
height: 100%;
padding: initial;
}
.item {
border: 1px;
border-color: black;
border-style: solid;
border-radius: 5px;
border-width: thin;
display: inline-block;
padding: 4px;
margin:0.25em;
}
.item div {
vertical-align:text-bottom;
display: inline;
}
.fa-trash {
margin-left: 1em;
cursor:pointer;
color: #428BCA;
}
#company {
display: inline-block;
width: 49%;
}
#warehouse {
float:right;
width: 49%;
display: inline-block;
}
.submitFilesButton {
opacity:0;
position:absolute;
}
.fileinput-button {
text-align:center;
white-space: nowrap;
position: relative;
}
#resetButton, #remedyButton {
margin: 0.4em;
float:right;
}
label {
vertical-align:top;
}
This has been open long enough. It looked like #Sampson was right and IE8 didn't support the JS API for files.
Is there a quick way to create an input text element with an icon on the right to clear the input element itself (like the google search box)?
I looked around but I only found how to put an icon as background of the input element. Is there a jQuery plugin or something else?
I want the icon inside the input text element, something like:
--------------------------------------------------
| X|
--------------------------------------------------
Add a type="search" to your input
The support is pretty decent but will not work in IE<10
<input type="search">
Older browsers
If you need IE9 support here are some workarounds
Using a standard <input type="text"> and some HTML elements:
/**
* Clearable text inputs
*/
$(".clearable").each(function() {
const $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
/* Clearable text inputs */
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 24px;
width: 100%;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
font-size: 1.2em;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
<span class="clearable">
<input type="text" name="" value="" placeholder="">
<i class="clearable__clear">×</i>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Using only a <input class="clearable" type="text"> (No additional elements)
set a class="clearable" and play with it's background image:
/**
* Clearable text inputs
*/
function tog(v){return v ? "addClass" : "removeClass";}
$(document).on("input", ".clearable", function(){
$(this)[tog(this.value)]("x");
}).on("mousemove", ".x", function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]("onX");
}).on("touchstart click", ".onX", function( ev ){
ev.preventDefault();
$(this).removeClass("x onX").val("").change();
});
// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/*
Clearable text inputs
*/
.clearable{
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center).
That 18px padding will prevent the text hide underneath the icon (while visible).
jQuery will add the class "x" (if input has value) showing the clear icon.
Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX.
Clicking the onX class removes all classes, resets the input value and hides the icon.
7x7px gif:
Base64 string:
data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
Could I suggest, if you're okay with this being limited to html 5 compliant browsers, simply using:
<input type="search" />
JS Fiddle demo
Admittedly, in Chromium (Ubuntu 11.04), this does require there to be text inside the input element before the clear-text image/functionality will appear.
Reference:
Dive Into HTML 5: A form of Madness.
input type=search - search field (NEW) HTML5.
According to MDN, <input type="search" /> is currently supported in all modern browsers:
<input type="search" value="Clear this." />
However, if you want different behavior that is consistent across browsers here are some light-weight alternatives that only require JavaScript:
Option 1 - Always display the 'x': (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
el.addEventListener('click', function(e) {
e.target.previousElementSibling.value = '';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Always display the 'x':</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Option 2 - Only display the 'x' when hovering over the field: (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
el.addEventListener('click', function(e) {
e.target.previousElementSibling.value = '';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
display: block;
}
.clearable-input > [data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the 'x' when hovering over the field:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Option 3 - Only display the 'x' if the input element has a value: (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input'), function(el) {
var input = el.querySelector('input');
conditionallyHideClearIcon();
input.addEventListener('input', conditionallyHideClearIcon);
el.querySelector('[data-clear-input]').addEventListener('click', function(e) {
input.value = '';
conditionallyHideClearIcon();
});
function conditionallyHideClearIcon(e) {
var target = (e && e.target) || input;
target.nextElementSibling.style.display = target.value ? 'block' : 'none';
}
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the 'x' if the `input` element has a value:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
You could use a reset button styled with an image...
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
See it in action here: http://jsbin.com/uloli3/63
I've created a clearable textbox in just CSS. It requires no javascript code to make it work
below is the demo link
http://codepen.io/shidhincr/pen/ICLBD
Since none of the solutions flying around really met our requirements, we came up with a simple jQuery plugin called jQuery-ClearSearch -
using it is as easy as:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
Example: http://jsfiddle.net/wldaunfr/FERw3/
If you want it like Google, then you should know that the "X" isn't actually inside the <input> -- they're next to each other with the outer container styled to appear like the text box.
HTML:
<form>
<span class="x-input">
<input type="text" class="x-input-text" />
<input type="reset" />
</span>
</form>
CSS:
.x-input {
border: 1px solid #ccc;
}
.x-input input.x-input-text {
border: 0;
outline: 0;
}
Example: http://jsfiddle.net/VTvNX/
Change the text box type as 'search' in the design mode or
<input type="search">
EDIT: I found this link. Hope it helps. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html
You have mentioned you want it on the right of the input text. So, the best way would be to create an image next to the input box. If you are looking something inside the box, you can use background image but you may not be able to write a script to clear the box.
So, insert and image and write a JavaScript code to clear the textbox.
Use simple absolute positioning - it's not that hard.
jQuery:
$('span').click(function(){
$('input', $(this).parent()).val('');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
Vanilla JS:
var spans = document.getElementsByTagName("span");
function clickListener(e) {
e.target.parentElement.getElementsByTagName("input")[0].value = "";
}
for (let i = 0; i < spans.length; i++) {
spans[i].addEventListener("click", clickListener);
}
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
jQuery Mobile now has this built in:
<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">
Jquery Mobile API TextInput docs
Something like this??
Jsfiddle Demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.searchinput{
display:inline-block;vertical-align: bottom;
width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
outline: none;
}
.clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
width: 20px;
transition: max-width 0.3s;overflow: hidden;float: right;
display: block;max-width: 0px;
}
.show {
cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}
</style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">✗</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
$('input.searchinput').val('').focus();
$(".clear").removeClass("show");
});
});
</script>
</body>
</html>
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
You can do with this commands (without Bootstrap).
Array.from(document.querySelectorAll('.search-field')).forEach(field => {
field.querySelector('span').addEventListener('click', e => {
field.querySelector('input').value = '';
});
});
:root {
--theme-color: teal;
}
.wrapper {
width: 80%;
margin: 0 auto;
}
div {
position: relative;
}
input {
background:none;
outline:none;
display: inline-block;
width: 100%;
margin: 8px 0;
padding: 13px 15px;
padding-right: 42.5px;
border: 1px solid var(--theme-color);
border-radius: 5px;
box-sizing: border-box;
}
span {
position: absolute;
top: 0;
right: 0;
margin: 8px 0;
padding: 13px 15px;
color: var(--theme-color);
font-weight: bold;
cursor: pointer;
}
span:after {
content: '\2716';
}
<div class="wrapper">
<div class="search-field">
<input placeholder="Search..." />
<span></span>
</div>
</div>
Here's a jQuery plugin (and a demo at the end).
http://jsfiddle.net/e4qhW/3/
I did it mostly to illustrate an example (and a personal challenge). Although upvotes are welcome, the other answers are well handed out on time and deserve their due recognition.
Still, in my opinion, it is over-engineered bloat (unless it makes part of a UI library).
I have written a simple component using jQuery and bootstrap.
Give it a try: https://github.com/mahpour/bootstrap-input-clear-button
Using a jquery plugin I have adapted it to my needs adding customized options and creating a new plugin. You can find it here:
https://github.com/david-dlc-cerezo/jquery-clearField
An example of a simple usage:
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">
<table>
<tr>
<td><input name="test1" id="test1" clas="test" type='text'></td>
<td>Empty</td>
</tr>
<tr>
<td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
<td>Not empty</td>
</tr>
</table>
<script>
$('.test').clearField();
</script>
Obtaining something like this:
No need to include CSS or image files. No need to include that whole heavy-artillery jQuery UI library. I wrote a lightweight jQuery plugin that does the magic for you. All you need is jQuery and the plugin. =)
Fiddle here: jQuery InputSearch demo.