custom input file in bootstrap 4 not show button - html

When I use Custom input file in bootstrap 4, don't change my input and don't show browse button.
file-browser
<label class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
.custom-file
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;
.custom-file-input
min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
.custom-file-control
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;

As far as i've checked - you need to insert the :before and :after pseudoelements - then it works.
.custom-file-control:before{
content: "Browse";
}
.custom-file-control:after{
content: "Add files..";
}
http://codepen.io/powaznypowazny/pen/jBqzgR

The documentation states that you should set the language of the document. For example, setting just:
<html lang="en">
was enough to get it working, unless like in #masud_moni answer, you have specified another language then use that instead of "en".

Try using the following code. Hope it is gonna fix your problem. It is given just under the code example in the Bootstrap page.
$custom-file-text: (
placeholder: (
en: "Choose file...",
es: "Seleccionar archivo..."
),
button-label: (
en: "Browse",
es: "Navegar"
)
);

Concerning the button, you can specify the language in your .css file and it will appear :
.custom-file-control:lang(fr)::before{
content:"PARCOURIR";
}
.custom-file-control:lang(en)::before{
content:"BROWSE";
}

To show custom-file-control's placeholder and its button caption in non english pages you must add to your CSS .custom-file-control:before and .custom-file-control:empty::after as in this snippet.
At this moment, there open issue to get the filename inside the custom control after selection... you can apply the onchange event workaround showed here.
/* Valid for any language */
.custom-file-control:before {
content: "Search";
}
.custom-file-control:empty::after {
content: "Choose a file...";
}
/* Specific for spanish language */
.custom-file-control:lang(es)::before {
content : "Buscar";
}
.custom-file-control:lang(es):empty::after {
content : "Seleccionar un fichero...";
}
<!DOCTYPE html>
<html lang="es-es">
<head>
<title>Test custom-file-control</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="mt-5 ml-5">
<label class="custom-file">
<input type="file" id="file" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])" required>
<span class="custom-file-control"></span>
</label>
</div>
</body>
</html>

I hit the same problem, came here for solution, did not find it, so I continued to dig for it: the right way to do it is to have a div of class custom-file and the input and label inside it, not the input inside the label.
<div class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<label class="custom-file" for="Image">Select file to upload</label>
</div>

Related

Bootstrap button outline and after clicking outline

Hello,
I am trying to finish the border around the button of btn-primary and after click it shows light blue border adjusting outline:0 but it is useless. How can I remove the border from this button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.container {
max-width: 520px;
max-height: 180px;
background-color: antiquewhite;
}
fieldset {
max-width: 518px;
max-height: 178px;
padding-right: 15px;
padding-left: 15px;
}
.btn{
font-weight:600;
color:#fff;
text-align:center;
vertical-align:middle;
border:1px solid transparent;
font-size:1.2rem;
line-height:1.5;
}
.btn-primary {
color: #fff;
background-color: #1172f4;
border-color: #000000;
}
.btn-primary: hover {
color: #fff;
background-color:#1172f4;
border-color: black;
}
.btn-primary: focus, .btn-primary. Focus {
color: #fff;
background-color:#1172f4;
border-color: #1875f6;
box-shadow: 0 0 0 0.2rem rgba(38, 38, 38, 0.5);
}
.btn: focus, .btn. Focus {
outline: 0;
}
button: focus{
outline:0;
}
/*.form-group{
max-width:518px;
}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action method="post" class="registration-form" style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;">
<fieldset>
<!--Start 2nd form field set-->
<div class="form-bottom">
<div class="form-group" style="margin-top:20px;width:100%;">
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
</div>
<!--End of 2nd form groupdiv-->
<button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%;">Get Started</button>
</div>
<!--End of bottom div-->
</fieldset>
<!--End of second form fieldset-->
</form>
</body>
</html>
My container and elements are also not showing the responsive behavior. Please help me to fix both issues. Which property in bootstrap btn-primary button handle these both borders.
Why are you declaring styling for buttons twice here?
.btn: focus, .btn. Focus {
outline: 0;
}
button: focus{
outline:0;
}
Also, styling using html components is a bad practice in web design. You should use class in most cases. For changing a particular element you should use id.
Answering to your question, it is a possible duplicate of Bootstrap button - remove outline on Chrome OS X that property around button when clicked is not outline, it is a box-shadow property. Remove your button styling definitions and replace them using this code:
.btn:focus{
box-shadow: none!important;
}
Then the shadow after click will disappear.
On another note, it seems that you are already using bootstrap 5 and inheriting styles from it. However, you are redefining the primary button styles manually. Why? Your imported CSS file should automatically update the primary button style. Also, do not put a space between focus and :.
As for your responsiveness issue, make your form responsive using bootstrap library since you're already using it.
https://getbootstrap.com/docs/4.0/components/forms/
The outline type thing that appears around the button as soon as it is clicked is not actually the outline property, it's the box-shadow property.
So, to solve this problem just add this box-shadow: none !important to the css of that button.
Try this out, it's the active class throwing off your code.
.btn-primary:active:focus {
box-shadow:none;
}
Inside your Chrome inspector, you can toggle the button states to debug. This one uses a combination of both :active:focus
Codepen
https://codepen.io/rickyhaswifi/pen/LYZMeoN?editors=1010

upload file option/icon inside the HTML text box

I am trying to give an upload file option which will add multiple files to DB. I am able to create an upload file option separately, but I want to give that option inside the text box.
Also, it should show the uploaded file names just below the text box (for eg we can see in skype text box or WhatsApp text box).
I tried this below code.
<textarea rows="3" class="feedback-input" id="comment" cols="50">
</textarea>
I took an example of text area but I want to do it on a text box.
I tried and did a lot of R&D on it but till now couldn't able to do it.
Can anyone help me with this?
Thanks in Advance!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="input-wrapper">
<input id="textbox" type="text" class="text-box" />
<input id="myInput" type="file" style="visibility:hidden" />
<label class="icon" for="textbox">
<img src="http://files.softicons.com/download/toolbar-icons/mono-general-icons-4-by-custom-icon-design/ico/upload.ico" onClick="$('#myInput').click();" />
</label>
</div>
<p class="text-here"></p>
</div>
</body>
<style>
.input-wrapper {
position: relative;
}
.icon {
position: absolute;
top: 25%;
left: 220px;
z-index: 1;
height: 5px;
margin-top: -5px;
width: 100px;
}
.icon img {
display: block;
width: 25px;
}
.text-box {
padding-left: 20px;
height: 30px;
width: 250px;
/*pointer-events: none;*/
}
</style>
</html>
I use CSS to put Icon inside the text box then used onclick event to call hidden upload input type

Bootstrap tooltip on Font Awsome icon in Modal

I have an input field with a Fontawesome icon that I added through content in my CSS file. This icon will only show on validation. I want to add bootstrap's tooltip to the icon, but I can't figure out a way to do this since my icon is on the CSS file and not on the HTML file. This is what I'm trying to achieve.
It might be important to note that I'm trying to achieve this in a modal.
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
.input-validation-error input {
border: 2px solid #f46262;
}
.input-validation-error input[type="text"] {
position: relative;
}
.input-validation-error::before {
font-family: "Font Awesome 5 Free";
color: #f46262;
position: relative;
content: "\f06a";
font-weight: 900;
z-index: 2;
top: 36px;
right: -210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<form class="registration-form">
<div class="form-group input-validation-error">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Nombre de usuario" data-toggle="tooltip" data-placement="top" title="I'm a tooltip">
</div>
</form>
Add an empty "placeholder" div before the input and position it the same as the icon. Use the placeholder as the tooltip trigger...
.tooltip-trigger {
position: absolute;
z-index: 3;
top: 36px;
left: 210px;
width: 30px;
height: 30px;
}
https://www.codeply.com/go/VxFPfXj9oa
Finally figured it out. My z-index was causing trouble, so I changed it from:
z-index: 3;
to
z-index: 5 !important;

Firefox has no "x" to remove content on input type="search" [duplicate]

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">&cross;</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.

Problem displaying a CSS 'popup' properly

I'm having some trouble with displaying a popup div with CSS. The problem is better explained with an example. Take the following html:
<html>
<head>
<style type"text/css">
#popup {
color: #fff;
background: #8c0000
}
#form {
background: #ccc;
color: #000;
position: absolute;
display: none;
}
#popup:hover > #form {
display: block;
}
</style>
</head>
<body>
<span id="popup">
Popup
<div id="form">
<form>
<label>Text Field</label>
<input type="text" />
<label>Select Field</label>
<select>
<option value="opt1">val1</option>
<option value="opt2">val2</option>
</select>
</form>
</div>
</span>
</body>
</html>
This consists of a single span element and a single hidden div element that contains a form. The div is displayed when the mouse is hovering the span element. The problem is that when I'm going to select an option in the dropdown box, the div disapears, as if it had lost focus. The result is that I can only change the dropdown value using the keyboard.
My question is: How do I fix that? Any clue on the subject is appreciated.
I believe you might be out of luck here, as rendering of <option> elements are dependent on browser / OS / platform, and not part of the CSS box model. Using JavaScript (and jQuery), this is pretty straight-forward. I've added a "Done" button to your form, as this might be a better solution for choosing when to hide the form. Otherwise, the user would have to be very careful not to move the mouse pointer outside the selection dropdown, or everything would disappear (if I've understood your request correctly.)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type"text/css">
#popup {
color: #fff;
background: #8c0000
}
#form {
background: #ccc;
color: #000;
position: absolute;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
function showForm() {
$("#form").show();
}
function hideForm() {
$("#form").hide();
}
</script>
</head>
<body>
<span id="popup" onmouseover="showForm()">
Popup
<div id="form">
<form>
<label>Text Field</label>
<input type="text" />
<label>Select Field</label>
<select>
<option value="opt1">val1</option>
<option value="opt2">val2</option>
</select>
<input type="button" value="Done" onclick="hideForm()" />
</form>
</div>
</span>
</body>
</html>
I'm not sure what, exactly, the problem is, but the following css works in Chrome 6.0.472.62 and Firefox 3.6.10 on Ubuntu 10.04:
#popup {
position: relative;
}
#form {
width: 12em;
display: none;
}
#popup:hover #form {
clear: both;
margin: 0;
display: block;
position: absolute;
top: 1em;
left: 0;
}
#popup form select:focus,
#popup form select:hover {
display: block;
}
Demo at: jsbin
And it's worth changing #popup to a div, as (I thought I) commented earlier.
You are showing the popup only on hover, so when the mouse leaves your popup, it is hidden,
You have to show it onmouseover of the span element, and hide it when the use clicks somewhere else on the page (other than the popup) or probably when he hits the close option on the popup.
I dont think you can do that with pure CSS. You would need some javascript.