When I change the style of my input, the labels and the value of the cursor disappear...
I don't know what's the matter...
Before :
Then, now that I changed the style :
The code :
#slidecontainer {
margin: 0 auto;
background-color: #afe0fc;
padding: 1.5em;
border-radius: 5px;
}
/* Styling the slider background */
#range {
-webkit-appearance: none;
background-color: grey;
outline: none;
height: 3px;
border-radius: 1px;
width:100%;
}
/* Styling the thumb */
#range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #078dd8;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
<div class="panel-body">
<div class="container-fluid" id="slidecontainer">
<input
id="range"
type="range"
data-slider-ticks="[0, 100, 200, 300, 400, 500]"
data-slider-ticks-snap-bounds="10"
data-slider-ticks-labels='["0€", "100€", "200€", "300€", "400€", "500€"]'
/>
</div>
</div>
Thanks for any explanations or help
Ensure you are including the bootstrap-slider namespace if not using jQuery.
"data-provide="slider"
<div class="panel-body">
<div class="container-fluid" id="slidecontainer">
<input
id="range"
type="range"
data-provide="slider"
data-slider-ticks="[0, 100, 200, 300, 400, 500]"
data-slider-ticks-snap-bounds="10"
data-slider-ticks-labels='["0€", "100€", "200€", "300€", "400€", "500€"]'
/>
</div>
</div>
with jQuery:
$('#slidecontainer input').slider();
without JQuery
var slider = new Slider('#slidecontainer input', {});
further examples found: https://seiyria.com/bootstrap-slider/#example-13
Related
junior dev working on a CSS button issue. It's a survey where when you click on a button in a scale to input your answer, the color of the button should change, stick, and stay that way until you go to the next page and continue (in essence, reset). Each page has three questions to answer before progressing.
Desired action/issue:
When you click your answer for Question One on the scale (using a series of 7 buttons to indicate your answer), it should change the color of the button you selected. When you click your answer for question two, it should change the color of THAT button to THAT color, and question ONE should KEEP it's color. Currently, it does not - clicking on Question Two removes the coloring from Question One.
I've gone through several options like :focus, :visited, and :active but am unable to find the answer. :focus looks like it changes the color on the click, but doesn't keep it once I click another Question after it. Attached is a screenshot so you can see a better example of what I'm talking about (question two has a selected button that is colored, and now question one is empty)
Screenshot example - question 2 button now has coloring, question 1 has coloring removed - how do I make it stop dropping the color when I click on question 2 buttons?
Summation: it changes color on click correctly, but does not KEEP that color once I click on the question after it. Full transparency, these were radio buttons and made by a developer previous to me but I've been tasked changing them over to 'regular' buttons - is that part of the issue? Any advice would be greatly appreciated! Thanks in advance!
Here's the code where it comes from:
return (
<div className={styles.leftSection}>
<div className={styles.center}>
<h1 className={styles.pageTitle}>{parse(title)}</h1>
<ProgressBar
done={meterProgress}
completedHeight={10}
backgroundColor={'#DD0D0D'}
backgroundHeight={2}
/>
{items.map((step, i) => {
if (index === i || index === i + 1 || index === i - 1) {
return (
<>
<button
className={styles.continueButton}
id="editButton"
onClick={handleEdit}
>
Edit Answer
</button>
<div className={styles.step} id={`${i}`}>
<h2 className={styles.question}>{step.question}</h2>
<form className={styles.form}>
<div className={styles.surveyBar}>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '7' : '1'}
className={styles.oneButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '6' : '2'}
className={styles.twoButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '5' : '3'}
className={styles.threeButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value="4"
className={styles.fourButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '3' : '5'}
className={styles.fiveButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '2' : '6'}
className={styles.sixButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '1' : '7'}
className={styles.sevenButton}
onChange={handleChange}
/>
</div>
<div className={styles.opinion}>
<div className={styles.disagree}>Strongly Disagree</div>
<div className={styles.neutral}>Neutral</div>
<div className={styles.agree}>Strongly Agree</div>
</div>
</form>
</div>
</>
);
}
})}
</div>
{error == true ? (
<div className={styles.errorMessage}>
{' '}
Almost there, {user?.firstName}! Please fill out all of the questions
to continue 🚀 <br />
<div className={styles.proTip}>
Pro tip: Click on the “Reload Questions” button.
</div>{' '}
</div>
) : null}
{showProgressIndicators && (
<div className={styles.buttons}>
<button className={styles.continueButton} onClick={handleBlur}>
Reload Questions
</button>
<button className={styles.continueButton} onClick={next}>
<p>
{index === items.length - 2
? 'Complete' || 'Continue 🔥'
: 'Continue 🔥'}
</p>
</button>
</div>
)}
</div>
);
// Button Number 1
input[type='button'].oneButton:focus {
position: relative;
background-color: #6C1111;
color: #6C1111;
}
input[type='button'].oneButton:checked:focus {
position: relative;
background-color: #6C1111;
color: #6C1111;
}
.oneButton {
transform: scale(3);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
border: 1px solid #6C1111;
background-color: white;
color: white;
}
// // Button Number 2
input[type='button'].twoButton:focus {
position: relative;
background-color: #A73E12;
color: #A73E12;
}
input[type='button'].twoButton:checked:focus {
position: relative;
background-color: #A73E12;
color: #A73E12;
}
.twoButton {
transform: scale(2.5);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
border: 1px solid #A73E12;
background-color: white;
color: white;
}
// // Button Number 3
input[type='button'].threeButton:focus {
position: relative;
background-color: #E36B14;
color: #E36B14;
}
input[type='button'].threeButton:checked:focus {
position: relative;
background-color: #E36B14;
color: #E36B14;
}
.threeButton {
transform: scale(2);
margin: 18px;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid #E36B14;
background-color: white;
color: white;
}
// // Button Number 4
input[type='button'].fourButton:focus {
position: relative;
background-color: #EAB902;
color: #EAB902;
}
input[type='button'].fourButton:checked:focus {
position: relative;
background-color: #EAB902;
color: #EAB902;
}
.fourButton {
transform: scale(1.5);
margin: 18px;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid #EAB902;
background-color: white;
color: white;
}
// // Button Number 5
input[type='button'].fiveButton:focus {
position: relative;
background-color: #C16911;
color: #C16911;
}
input[type='button'].fiveButton:checked:focus {
position: relative;
background-color: #C16911;
color: #C16911;
}
.fiveButton {
transform: scale(2);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
border: 1px solid #C16911;
background-color: white;
color: white;
}
// // Button Number 6
input[type='button'].sixButton:focus {
position: relative;
background-color: #CF3B0F;
color: #CF3B0F;
}
input[type='button'].sixButton:checked:focus {
position: relative;
background-color: #CF3B0F;
color: #CF3B0F;
}
.sixButton {
transform: scale(2.5);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
background-color: white;
color: white;
border: 1px solid #CF3B0F;
}
// // Button Number 7
input[type='button'].sevenButton:focus {
position: relative;
background-color: #DD0D0D;
color: #DD0D0D;
}
input[type='button'].sevenButton:checked:focus {
position: relative;
background-color: #DD0D0D;
color: #DD0D0D;
}
.sevenButton {
transform: scale(3);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
border: 1px solid #DD0D0D;
background-color: white;
color: white;
}
Well, I would use (a ver simple) Jquery to do that. Just add a class on click with the style you want. like this:
$('.input').click(function () {
$(this).siblings().removeClass('animation');
$(this).addClass('animation');
});
input {width:100px;}
.animation {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
</div>
<br>
<div>
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
</div>
<br>
<div>
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
</div>
<br>
I add the line $(this).siblings().removeClass('animation');so if you chose an answer from same block it won't style both same time.
I have some HTML/CSS that works perfectly on desktop.
It also works on mobile, but the up and down arrows for numerical selection on the input field do not display, forcing the user to "enter" the number manually. The client has requested these numerical spinner arrows are retained on mobile view.
There are a lot of questions about how to hide/disable spinners and even a few about how to retain the spinners, but these have no or incorrect answers and following these answers and suggestions has not resolved this issue.
#media only screen {
input[type=number] {
/* -moz-appearance: number-input; */
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: inner-spin-button;
/***
* Below tried and failed:
***/
/* -moz-appearance: number-input; */
/*-ms-appearance: inner-spin-button;*/
/*appearance: auto;*/
margin: 0;
opacity: 1;
}
#updQtyLoose47 {
/* basic styling */
background: rgba(245, 235, 170, 0.75);
border-radius: 0;
border: none;
border: solid 1px #dbdbdb;
color: inherit;
display: block;
outline: 0;
padding: 0.25rem 0 0.25rem 0.75rem;
text-decoration: none;
width: 100px;
}
}
<div>
<input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" id="updQtyLoose47" min="0" max="8" >
</div>
Platform:
iPad (iOS 12.5)
Browsers:
Google Chrome and Safari
Attempted solutions:
opacity is set to 1 but this does not display the spinners (source).
Setting moz-appearance: number-input; (and similar) doesn't display the spinners (source).
Setting -webkit-appearance: inner-spin-button; doesn't display the spinners (source).
Setting inputmode="numeric" on the HTML input element does not show spinners (source).
iPad simulators (for what they're worth) on PC on Firefox Inspector shows the spinner buttons, and Google Chrome Inspector they do NOT show the spinner buttons.
There is a comment here that
In firefox and safari, its a default feature to show it always.
This no longer appears to be the case for Safari 12.1
How can I show these input spinner buttons on iPad display of the webpage?
At some point it's hard and tricky to get a consistent result across the platforms for a native element like an input. For this reason, I would recommend you to re-create one that 'fake' the native behaviour by using some javascript. Here is a very basic example:
const input = document.querySelector('input[type=number]')
const increment = () => {
input.value = Number(input.value) + 1
}
const decrement = () => {
input.value = Number(input.value) - 1
}
document.querySelector('.spinner.increment').addEventListener('click', increment)
document.querySelector('.spinner.decrement').addEventListener('click', decrement)
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.number-input {
position: relative;
width: fit-content;
}
input {
width: 60px;
}
.spinners {
position: absolute;
right: 0;
top: 50%;
display: flex;
flex-direction: column;
width: fit-content;
margin: 1px;
transform: translateY(-50%);
}
.spinner {
font-size: 7px;
border: none;
padding: 0 1px;
}
.spinner:hover {
background: lightgrey;
}
<div class="number-input">
<input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" min="0" max="8">
<div class="spinners">
<button class="spinner increment">▲</button>
<button class="spinner decrement">▼</button>
</div>
</div>
If you need something more customised, simply adjust a little bit of css and html structure:
const input = document.querySelector('input[type=number]')
const increment = () => {
input.value = Number(input.value) + 1
}
const decrement = () => {
input.value = Number(input.value) - 1
}
document.querySelector('.spinner.increment').addEventListener('click', increment)
document.querySelector('.spinner.decrement').addEventListener('click', decrement)
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.number-input {
display: flex;
}
input {
width: 40px;
border: solid 1px lightgrey;
border-radius: 0;
text-align: center
}
.spinner {
border: solid 1px lightgrey;
}
.spinner:hover {
background: lightgrey;
}
.spinner:first-child {
border-radius: 3px 0 0 3px;
}
.spinner:last-child {
border-radius: 0 3px 3px 0;
}
<div class="number-input">
<button class="spinner decrement">-</button>
<input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" min="0" max="8">
<button class="spinner increment">+</button>
</div>
Here is a version with JQuery:
const input = $('input[type=number]')
const increment = () => {
input.val(Number(input.val()) + 1)
}
const decrement = () => {
input.val(Number(input.val()) - 1)
}
$('.spinner.increment').click(increment)
$('.spinner.decrement').click(decrement)
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.number-input {
display: flex;
}
input {
width: 40px;
border: solid 1px lightgrey;
border-radius: 0;
text-align: center
}
.spinner {
border: solid 1px lightgrey;
}
.spinner:hover {
background: lightgrey;
}
.spinner:first-child {
border-radius: 3px 0 0 3px;
}
.spinner:last-child {
border-radius: 0 3px 3px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="number-input">
<button class="spinner decrement">-</button>
<input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" min="0" max="8">
<button class="spinner increment">+</button>
</div>
I have been looking for so long to show arrows on Mobile Chrome when I realized that the operating system deals differently with inputs (popping up the keyboard and not showing arrows). I came across this post and I have improved the code to make that you can have many buttons in the same page but just one function to manage the increment/decrement of each. The final example is like in the picture below for smartphones.
To add a third button just make the input with id='3' and the button with plus sign with id='pb3' and the button with minus side with id='mb3'
You do not need to change anything else
You can either use the onchange event or the onkeyup event to call imposeMinMax() function. Depending on your application. onkeyup works well only if you have a min<0 and max>0.
I have also added autoincrement input when the user keeps the button pressed. Visit this link for the autoincrement code.
function imposeMinMax(el){ /*this function delimits max and min*/
if(el.value != ""){
if(parseInt(el.value) < parseInt(el.min)){
el.value = el.min;
}
if(parseInt(el.value) > parseInt(el.max)){
el.value = el.max;
}
}
}
function modIn(inId){
if(inId.charAt(0)=='p'){ /*p for plus*/
var targetId = inId.match(/\d+/)[0]; /*just keep the number*/
document.getElementById(targetId).value ++;
imposeMinMax(document.getElementById(targetId));
}
if(inId.charAt(0)=='m'){ /*m for minus*/
var targetId = inId.match(/\d+/)[0];
document.getElementById(targetId).value --;
imposeMinMax(document.getElementById(targetId));
}
}
.signBut {
width: 30px;
margin-bottom: 5px;
}
.inNum {width: 40px;}
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class='card'>
<div class='card-body' >
<h5 class='card-title'>TEMPERATURE</h5>
<div class='container'>
<div class='row'>
<div class='col-auto' style="width: 40%;">
<label >Temprerature:</label>
</div>
<div class='col-auto'>
<button type="button" class="btn btn-danger btn-sm signBut" id='mb1' onclick='modIn(this.id)'>-</button>
<input type="number" name='tempCalib' id='1' class='inNum' onchange='imposeMinMax(this)' value='0' max='6' min="-6" step="1">
<button type="button" class="btn btn-danger btn-sm signBut" id='pb1' onclick='modIn(this.id)'>+ </button> °C
</div>
</div>
<br>
<div class='row'>
<div class='col-auto' style="width: 40%;">
<label>Hysteresis:</label>
</div>
<div class='col-auto'>
<button type="button" class="btn btn-danger btn-sm signBut" id='mb2' onclick='modIn(this.id)'>-</button>
<input type="number" name='tempHyst' id='2' class='inNum' onchange='imposeMinMax(this)' value="1" max="4" min="-4" step="1">
<button type="button" class="btn btn-danger btn-sm signBut" id='pb2' onclick='modIn(this.id)'>+</button> °C
</div>
</div>
</div>
</div>
</div>
You can try to check this example here for this
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
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.
Is there a way to control the size of the radio button in CSS ?
This css seems to do the trick:
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}
Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg. the above height: 2em will render the button at twice the line height. This also works for checkboxes (input[type=checkbox]). Some browsers render better than others.
From a windows box it works in IE8+, FF21+, Chrome29+.
Old question but now there is a simple solution, compatible with most browsers, which is to use CSS3. I tested in IE, Firefox and Chrome and it works.
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
Change the value 1.5, in this case an increment of 50% in size, according to your needs. If the ratio is very high, it can blur the radio button. The next image shows a ratio of 1.5.
You can control radio button's size with css style:
style="height:35px; width:35px;"
This directly controls the radio button size.
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
A solution which works quite well is described right here:
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio
The idea is to use the appearance property, which when set to none allows to change the width and height of the radio button.
The radio buttons are not blurry, and you can add other effects like transitions and stuff.
Here's an example :
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
outline: unset !important /* I added this one for Edge (chromium) support */
}
The only drawback is that it is not supported yet on IE.
Here's a GIF below to give an idea of what can be achieved. The result will look nicer on an actual browser.
And the plunker : https://plnkr.co/plunk/1W3QXWPi7hdxZJuT
Not directly. In fact, form elements in general are either problematic or impossible to style using CSS alone. the best approach is to:
hide the radio button using javascript.
Use javascript to add/display HTML that can be styled how you like e.g.
Define css rules for a selected state, which is triggered by adding a class "selected" to yuor span.
Finally, write javascript to make the radio button's state react to clicks on the span, and, vice versa, to get the span to react to changes in the radio button's state (for when users use the keyboard to access the form). the second part of this can be tricky to get to work across all browsers. I use something like the following (which also uses jQuery. I avoid adding extra spans too by styling and applying the "selected" class directly to the input labels).
javascript
var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
if (this.checked) {
select($(this).parent());
}
}).find("label").bind("click", function (event) { //mouse use
select($(this));
});
function select(el) {
labels.removeClass("selected");
el.addClass("selected");
}
html
<ul class="radioButtons">
<li>
<label for="employee1">
employee1
<input type="radio" id="employee1" name="employee" />
</label>
</li>
<li>
<label for="employee2">
employee1
<input type="radio" id="employee2" name="employee" />
</label>
</li>
</ul>
Resizing the default widget doesn’t work in all browsers, but you can make custom radio buttons with JavaScript. One of the ways is to create hidden radio buttons and then place your own images on your page. Clicking on these images changes the images (replaces the clicked image with an image with a radio button in a selected state and replaces the other images with radio buttons in an unselected state) and selects the new radio button.
Anyway, there is documentation on this subject. For example, read this: Styling Checkboxes and Radio Buttons with CSS and JavaScript.
Here's one approach. By default the radio buttons were about twice as large as labels.
(See CSS and HTML code at end of answer)
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 (Fuzziness not IE's fault, hosted test on netrenderer.com)
CSS:
.sortOptions > label {
font-size: 8px;
}
.sortOptions > input[type=radio] {
width: 10px;
height: 10px;
}
HTML:
<div class="rightColumn">Answers
<span class="sortOptions">
<input type="radio" name="answerSortList" value="credate"/>
<label for="credate">Creation</label>
<input type="radio" name="answerSortList" value="lastact"/>
<label for="lastact">Activity</label>
<input type="radio" name="answerSortList" value="score"/>
<label for="score">Score</label>
<input type="radio" name="answerSortList" value="upvotes"/>
<label for="upvotes">Up votes</label>
<input type="radio" name="answerSortList" value="downvotes"/>
<label for="downvotes">Down Votes</label>
<input type="radio" name="answerSortList" value="accepted"/>
<label for="downvotes">Accepted</label>
</span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
</div>
</body>
</html>
Well, I am from the future as compared to the posted year of this question, but I believe my answer will benefit all the new visitors:
So if you want to increase the size of the "radio" button with CSS you can simply do it by putting the following styling rules in CSS and it will help you,
input[radio] {
height: 20px;
width: 20px;
vertical-align: middle;
}
This works fine for me in all browsers:
(inline style for simplicity...)
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>
The size of both the radio button and text will change with the label's font-size.
Directly you can not do this. [As per my knowledge].
You should use images to supplant the radio buttons. You can make them function in the same manner as the radio buttons inmost cases, and you can make them any size you want.
You can also use the transform property, with required value in scale:
input[type=radio]{transform:scale(2);}
(Vue3) HTML:
<h2>Group By</h2>
<div class="radioButtons">
<label><input type="radio" id="groupByDevice"
v-model="data.groupBy" value="device" />
<span>Device Location</span>
</label>
<label><input type="radio" id="groupByLocation"
v-model="data.groupBy" value="location" />
<span>Device Type</span></label>
</div>
</div>
SASS:
$vw-viewport: 2400px;
#function toVw($vw-viewport, $value) {
#return ($value / $vw-viewport) * 100vw;
}
label {
font-size: toVw($vw-viewport, 16px);
line-height: toVw($vw-viewport, 18px);
}
.radioButtons {
> label {
white-space: no-wrap;
display: inline-block;
height: toVw($vw-viewport, 22px);
margin: 0 toVw($vw-viewport, 10px) toVw($vw-viewport, 5px) 0;
> input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
border-radius: 50%;
width: toVw($vw-viewport, 18px);
height:toVw($vw-viewport, 18px);
border: toVw($vw-viewport,2px) solid #747474;
margin: 0;
position: relative;
top: toVw($vw-viewport, 2px);
background: white;
&::after {
content: '';
position: absolute;
top: 12.5%;
left: 12.5%;
right: 12.5%;
bottom: 12.5%;
width: auto;
height: auto;
background: rgb(80, 95, 226);
opacity: 0;
border-radius: 50%;
transition: 0.2s opacity linear;
}
&:checked {
&::after {
opacity: 1 !important;
background: rgb(80, 95, 226) !important;
}
}
}
&:hover {
cursor: pointer;
> input[type=radio]::after {
opacity: 1;
background: #cfd1e2;
}
}
> span {
display: inline-block;
position: relative;
top: toVw($vw-viewport, -1px);
padding-left: toVw($vw-viewport, 7px);
}
}
}
The result is like this. On hover, a gray dot appears as well. The labels will wrap horizontally when there is room, there was not enough room here so they stack. This scales with the page. If you don't need that, remove the SASS function and use the pixels directly. This is a case where !important is being used correctly IMHO, in this case to override hover when the radio is checked.
try this code... it may be the ans what you exactly looking for
body, html{
height: 100%;
background: #222222;
}
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h2 {
color: #AAAAAA;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Male</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Female</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Transgender</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<html>
<head>
</head>
<body>
<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
var groupelements = document.getElementById(groupelement);
var buttons = groupelements.getElementsByTagName("button");
for (i=0;i<buttons.length;i++) {
if (buttons[i].id.indexOf("_on") != -1) {
buttons[i].style.display="none";
} else {
buttons[i].style.display="block";
}
}
var buttonON = buttonelement + "_button_on";
var buttonOFF = buttonelement + "_button_off";
document.getElementById(buttonON).style.display="block";
document.getElementById(buttonOFF).style.display="none";
document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>
<form>
<h1>farbige Radiobutton</h1>
<div id="button_group">
<input type="hidden" name="button_value" id="button_value" value=""/>
<span class="radiobuttons">
<button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
<button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
<label for="button1_button_on"> Ich will eins</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
<button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
<label for="button2_button_on"> Ich will zwei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
<button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
<label for="button3_button_on"> Ich will drei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
<button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
<label for="button4_button_on"> Ich will vier</label>
</span>
</div>
</form>
</body>
</html>