Develop Reference

How do I add text on my color picker in html

I have this color picker and I wanted to add some plus sign or something like more colors text on my color picker how do I do that? For now there is this hyphen on the color picker:
.more_colors {
position: relative;
top: 4px;
left: 2cm;
padding: 10px 20px;
cursor: pointer;
border-radius: 20px;
background-color: rgb(152, 219, 43);
}
<input class="more_colors" id="colorpicker" type="color" value="#e6f28a">

I think this should work for you.
.more_colors {
position: relative;
display: inline-flex;
cursor: pointer;
border-radius: 20px;
background-color: rgb(152, 219, 43);
margin: 10px;
}
.more_colors label {
padding: 15px 25px;
}
.more_colors input {
visibility: hidden;
position: absolute;
bottom: 0;
}
<div class="more_colors" >
<label for="colorpicker">Color Picker</label>
<input id="colorpicker" type="color" value="#e6f28a" >
</div>

You can use a <label> to display text beside the input, since the input value is always a color (in hexadecimal format). Also remove the padding and background-color properties to visualize the color input changes:
#colorpicker {
cursor: pointer;
}
<div>
<input type="color" id="colorpicker" value="#e6f28a">
<label for="colorpicker">More Colors</label>
</div>

How can I make jscolor colorpicker to work on a div?

I am using jscolor colorpicker which can only be attached to button element or input element.I want to use it for div.I tried this way-
https://jsfiddle.net/anuranpal/Lead7c7q/43/
CSS
edit-color-container {
border: 1px solid gainsboro;
height: 70px;
width: 70px;
text-align: center;
}
.select-button {
background: none!important;
border: none;
padding: 0!important;
cursor: pointer;
display: block;
width: 100%;
height: 100%;
-moz-user-select: none;
-webkit-user-select: none;
/* this will work for QtWebKit in future */
-webkit-user-drag: none;
}
.selected-color-container {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
width: 35px;
height: 35px;
background: #DF068C;
display: inline-block;
vertical-align: top;
margin: auto;
margin-top: 5px;
position: relative;
}
HTML
<div class="edit-color-container">
<input id="selected-color-value" type="hidden" value="#DF068C" />
<button id="editColor" class="select-button jscolor " data-jscolor="
{width:150, height:150,valueElement:'selected-color-
value',styleElement:'selectedColor',borderWidth:0,borderColor:'#FFF',
insetWidth:0, insetColor:'#FFF',shadow:false,
backgroundColor:'#e6e7e9',borderRadius:2, zIndex:'2000'}">
<div class="selected-color-container" id="selectedColor"></div>
<div class="uk-text-small uk-text-primary uk-margin-small-top" style="margin:auto">Edit</div>
</button>
</div>
But here I have used button instead of div and it is creating some issues in chrome like if I click on the circle,nothing happen but If I click just outside the circle, the color picker toggles.
So, I want to use div instead of button and open the colorpicker when I click on the div.
Please help. Thank you in Advance :-)

Seems like the plugin doesn't support div, but using its api you can toggle colorpicker using code, if I got you correctly, here is my solution:
HTML
<div class="edit-color-container">
<div id="styleSpan" style="background-image: none; background-color: rgb(186, 243, 255); color: rgb(0, 0, 0);"
onclick="document.getElementById('color-picker').jscolor.show()"></div>
<div id="btn" onclick="document.getElementById('color-picker').jscolor.show()">Edit</div>
<input id="color-picker" class="jscolor {styleElement:'styleSpan',value:'DF068C'}" type="hidden">
</div>
CSS
.edit-color-container {
border: 1px solid gainsboro;
height: 70px;
width: 70px;
text-align: center;
}
#styleSpan {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 5px auto;
cursor: pointer;
}
#btn {
cursor: pointer;
}
body > div:last-child {
margin: 50px 0 0 20px;
}
jsfiddle
Notice that you can use onclick on edit-color-container instead.

get value of a checked bootstrap checkbox

I have this HTML form:
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>
How i can know if the input is checked or not ?
I tried like this but nothing alerted:
$(document).on('click','.animated-switch',function(e){
alert($('#switch-success:checked').val() );
});
Here a JSFIDDLE file in order to see my clear example: https://jsfiddle.net/s2f9q3fv/

Your code works fine in the snippet. You have forgotten to add value to your checkbox, but even without it you should be able to see the alert message with undefined value (see below the value 'test' was added in the snippet).
$(document).on('click','#switch-success:checked',function(e){
alert($('#switch-success:checked').val() );
});
.animated-switch > input[type="checkbox"] {
display: none; }
.animated-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px; }
.animated-switch > label::before {
background: black;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position: absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px; }
.animated-switch > label::after {
background: white;
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px; }
.animated-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5; }
.animated-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" value="test" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>
UPDATE:
You should bind the click event on the checkbox itself, not the parent. Try the snipped again with the fancy animation.
Notice if you want the alert always to be executed you have to remove the :checked attribute in the selector.

Try this
$(".animated-switch").change(function () {
alert($('#switch-success:checked').val() );
});

I still had problems and came up with a workaround:
<input class="form-check-input" type="checkbox" id="inlineCheckbox1"
onclick="document.getElementById('inlineCheckbox1').setAttribute('value',
document.getElementById('inlineCheckbox1').value * -1)" value='-1'>
<label class="form-check-label" for="inlineCheckbox1">1</label>
I set a 'onclick' event and I set a 'value' attribute to -1. When you click on the checkbox or the label, 'value' will change its sign. So when you want to get the value, grab the 'value' attribute and check if it's greater or less than zero.

Possibly better way to code this hacky toggle button?

I have a toggle button that has been coded up, but I dont think its good to use in my form, since its a pretty bad hacky code to select either option.
Is there a better/efficient way to code this toggle button instead? I am not good with jQuery, so any help with provided functionality would be helpful.
If there is also a way of programming it to slide the toggle left/right instead of clicking left/right would be great also.
I have also attached these images to show the behaviour of how it should function:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons
Any questions, please ask...
<html>
<head>
<style>
#toggle-slide {
border: 4px #303F9F solid;
border-radius: 5px;
display: flex;
width:300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#toggle-slide div {
flex:1;
padding: 10px 20px;
}
#toggle-option-0 {
background-color:#3F51B5;
}
#toggle-option-1 {
background-color:white;
}
</style>
<script>
function toggle() {
realToggle = document.getElementById('real-toggle');
if (realToggle.value == 0) {
realToggle.value=1;
document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
} else {
realToggle.value=0;
document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';
}
}
</script>
</head>
<body>
<div id='toggle-slide' onclick='toggle()'>
<div id='toggle-option-0' class='active'>Private</div>
<div id='toggle-option-1'>Public</div>
<input id='real-toggle' type=hidden name=private value=1 />
</div>
</body>
</html>

A pure CSS version:
On the following snippet there's a hidden checkbox that becomes checked/unchecked when the content in label is clicked. Using the CSS :checked selector, the #background position is changed from 0% to 50% and it's color changes from red to blue.
The background is separated from the text and set with position:absolute (to be easily moved) plus z-index:-1 (which brings it to behind the subtitles). A CSS transition added on the #background animates the changes on it's position/color.
.toggle-slide {
border: 4px #555 solid;
border-radius: 5px;
display: flex;
width: 300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
.toggle-slide .subtitle {
flex: 1;
padding: 10px 20px;
}
#background {
width: 50%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background-color: tomato;
-webkit-transition: all 0.6s; /* Safari */
transition: all 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1);
transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
input[type=checkbox] {
display: none;
}
#real:checked ~ label #background {
background-color: skyblue;
left: 50%;
}
<input id=real type=checkbox name=real />
<label class=toggle-slide for=real>
<div id=background></div>
<div class=subtitle>Private</div>
<div class=subtitle>Public</div>
</label>

You can do this completely in pure css, but since you were asking for jQuery...
$(document).ready(function() {
$('.input-button').click(function() {
if ($('.public').hasClass('selected')) {
$('.public').removeClass('selected');
$('.private').addClass('selected');
$('.slider').stop().animate({
left: '48%'
}, 200);
} else {
$('.private').removeClass('selected');
$('.public').addClass('selected');
$('.slider').stop().animate({
left: '2%'
}, 200);
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.input-button {
width: 200px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -20px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #2E86AB;
border-radius: 4px;
line-height: 40px;
font-family: sans-serif;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.input-button div {
width: 100px;
height: 85%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
<div class='slider'></div>
<span class='private'>Private</span>
<span class='public selected'>Public</span>
</div>

Here is a good example of what you were trying to create
jQuery on-off-switch.js Plugin
It also implemented with jQuery and supports the sliding on drag functionality.
How to use the plugin

How do I put a clear button inside my HTML text input box like the iPhone does?

I want to have a nice little icon that, when clicked will clear the text in the <INPUT> box.
This is to save space rather than having a clear link outside of the input box.
My CSS skills are weak... Here is a screenshot photo of how the iPhone looks.

Nowadays with the <input type="search"> element, it's pretty simple:
<input type="search" placeholder="Search..."/>
Supported browsers will automatically render a usable clear button in the field by default.
The clear button is a ::-webkit-search-cancel-button CSS pseudo-element automatically inserted by Webkit/Blink-based browsers (though it's technically still a non-standard feature).
If you use Bootstrap, you'll have to add a CSS override to force the pseudo-element to show:
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Officially, the -webkit-search-cancel-button psuedo-element is non-standard and should not be relied upon as a built-in HTML feature across browsers.
Notably Firefox does not render the clear button by default as of version 110, but they have plans to enable it eventually: https://bugzilla.mozilla.org/show_bug.cgi?id=1654288. You can check up-to-date browser compatibility information on MDN or CanIUse.com.
The most reliable, future-proof, cross-browser approach is to use a form with an explicit <input type="reset"/> element nearby to allow clearing the Search form with a button. This also makes it easier to add accecibility hints and style the clear button directly with CSS.
<form action="/search">
<input type="search" placeholder="Search..."/>
<input type="reset" value="X" alt="Clear the search form">
<input type="submit" value="Search">
</form>
Extras: Safari/WebKit browsers can also provide extra features when using type="search", like results=5, enterkeyhint="...", and autosave="...", but they also override many of your styles (e.g. height, borders) . To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:
input[type=search] {
-webkit-appearance: none;
}
See the MDN Documentation, CanIUse.com, or CSS-Tricks.com for more complete and up-to-date info about the features provided by <input type="search"/> in browsers today.

Since HTML5, you could use <input type="search">. But this isn't necessarily customizable. In case you'd like to have full control over the UI, here are two kickoff examples. One with jQuery and another without.
With jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('input.deletable').wrap('<span class="deleteicon"></span>').after($('<span>x</span>').click(function() {
$(this).prev('input').val('').trigger('change').focus();
}));
});
</script>
<style>
span.deleteicon {
position: relative;
display: inline-flex;
align-items: center;
}
span.deleteicon span {
position: absolute;
display: block;
right: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background-color: #ccc;
font: 13px monospace;
text-align: center;
line-height: 1em;
cursor: pointer;
}
span.deleteicon input {
padding-right: 18px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="deletable">
</body>
</html>
Without jQuery
jQuery is not strictly necessary, it just nicely separates the logic needed for progressive enhancement from the source, you can of course also go ahead with plain HTML/CSS/JS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532, with "plain" HTML/CSS/JS</title>
<style>
span.deleteicon {
position: relative;
display: inline-flex;
align-items: center;
}
span.deleteicon span {
position: absolute;
display: block;
right: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background-color: #ccc;
font: 13px monospace;
text-align: center;
line-height: 1em;
cursor: pointer;
}
span.deleteicon input {
padding-right: 18px;
box-sizing: border-box;
}
</style>
</head>
<body>
<span class="deleteicon">
<input type="text">
<span onclick="var input = this.previousElementSibling; input.value = ''; input.focus();">x</span>
</span>
</body>
</html>
You only end up with uglier HTML (and non-crossbrowser compatible JS ;) ).
Again, if the UI look'n'feel isn't your biggest concern, but the functionality is, then just use <input type="search"> instead of <input type="text">. It'll show the (browser-specific) clear button on HTML5 capable browsers.

HTML5 introduces the 'search' input type that I believe does what you want.
<input type="search" />
Here's a live example.

Check out our jQuery-ClearSearch plugin. It's a configurable jQuery plugin - adapting it to your needs by styling the input field is straightforward. Just use it as follows:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
Example

You can't actually put it inside the text box unfortunately, only make it look like its inside it, which unfortunately means some css is needed :P
Theory is wrap the input in a div, take all the borders and backgrounds off the input, then style the div up to look like the box. Then, drop in your button after the input box in the code and the jobs a good'un.
Once you've got it to work anyway ;)

Of course the best approach is to use the ever-more-supported <input type="search" />.
Anyway for a bit of coding fun I thought that it could be achieved also using the form's reset button, and this is the working result (it is worth noting that you cannot have other inputs in the form but the search field with this approach, or the reset button will erase them too), no javascript needed:
form{
position: relative;
width: 200px;
}
form input {
width: 100%;
padding-right: 20px;
box-sizing: border-box;
}
form input:placeholder-shown + button{
opacity: 0;
pointer-events: none;
}
form button {
position: absolute;
border: none;
display: block;
width: 15px;
height: 15px;
line-height: 16px;
font-size: 12px;
border-radius: 50%;
top: 0;
bottom: 0;
right: 5px;
margin: auto;
background: #ddd;
padding: 0;
outline: none;
cursor: pointer;
transition: .1s;
}
<form>
<input type="text" placeholder=" " />
<button type="reset">×</button>
</form>

I got a creative solution I think you are looking for
$('#clear').click(function() {
$('#input-outer input').val('');
});
body {
font-family: "Tahoma";
}
#input-outer {
height: 2em;
width: 15em;
border: 1px #e7e7e7 solid;
border-radius: 20px;
}
#input-outer input {
height: 2em;
width: 80%;
border: 0px;
outline: none;
margin: 0 0 0 10px;
border-radius: 20px;
color: #666;
}
#clear {
position: relative;
float: right;
height: 20px;
width: 20px;
top: 5px;
right: 5px;
border-radius: 20px;
background: #f1f1f1;
color: white;
font-weight: bold;
text-align: center;
cursor: pointer;
}
#clear:hover {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
<input type="text">
<div id="clear">
X
</div>
</div>
https://jsfiddle.net/qdesign/xn9eogmx/1/

Firefox doesn't seem to support the clear search field functionality... I found this pure CSS solution that works nicely: Textbox with a clear button completely in CSS | Codepen | 2013. The magic happens at
.search-box:not(:valid) ~ .close-icon {
display: none;
}
body {
background-color: #f1f1f1;
font-family: Helvetica,Arial,Verdana;
}
h2 {
color: green;
text-align: center;
}
.redfamily {
color: red;
}
.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
}
.search-box {
width: 80%;
border: 1px solid #ccc;
outline: 0;
border-radius: 15px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
background-color: #FA9595;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: normal;
font-size: 12px;
box-shadow: 0 0 2px #E50F0F;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<h2>
Textbox with a clear button completely in CSS <br> <span class="redfamily">< 0 lines of JavaScript ></span>
</h2>
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
</div>
I needed more functionality and added this jQuery in my code:
$('.close-icon').click(function(){ /* my code */ });

Maybe this simple solution can help:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>

#Mahmoud Ali Kaseem
I have just changed some CSS to make it look different and added focus();
https://jsfiddle.net/xn9eogmx/81/
$('#clear').click(function() {
$('#input-outer input').val('');
$('#input-outer input').focus();
});
body {
font-family: "Arial";
font-size: 14px;
}
#input-outer {
height: 2em;
width: 15em;
border: 1px #777 solid;
position: relative;
padding: 0px;
border-radius: 4px;
}
#input-outer input {
height: 100%;
width: 100%;
border: 0px;
outline: none;
margin: 0 0 0 0px;
color: #666;
box-sizing: border-box;
padding: 5px;
padding-right: 35px;
border-radius: 4px;
}
#clear {
position: absolute;
float: right;
height: 2em;
width: 2em;
top: 0px;
right: 0px;
background: #aaa;
color: white;
text-align: center;
cursor: pointer;
border-radius: 0px 4px 4px 0px;
}
#clear:after {
content: "\274c";
position: absolute;
top: 4px;
right: 7px;
}
#clear:hover,
#clear:focus {
background: #888;
}
#clear:active {
background: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
<input type="text">
<div id="clear"></div>
</div>

It is so simple in HTML5
<input type="search">
This will do your job!