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.
I want to make button appear like image shown below. Do you guys have advice?
Medium create story screenshot:
Try some css to achive your button style:
HTML :
<span class="p-btn">+</span>
CSS :
span.p-btn {
border: solid 1px;
height: 36px;
width: 36px;
border-radius: 100%;
float: left;
line-height: 35px;
text-align: center;
font-size: 23px;
cursor: pointer;
}
After span (button) you can add your text.
.my.btn:focus,
.my.btn:hover,
.my.btn{
background:none;
border:none;
box-shadow:none;
color:gray;
padding: 0px;
}
.myInput{
border: none;
border-bottom: 1px solid #808080;
}
.myInput:focus{
border: none; outline:none;
border-bottom: 1px solid #808080;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<button class="my btn glyphicon glyphicon-plus-sign"></button>
<input type="text" class="myInput">
</div>
I have a question regarding the styling of the input type file button.
Since I cannot style the file input button, can I make a div that I can style how I want and when I click it , it triggers the input type button which opens the browse window ? If yes, any suggestions how to do it ?
Thank you.
You can style the file input with just css
label[for="file-input"] {
display: block;
margin-bottom: 1em;
font-size: 1em;
color: #fff;
opacity: .9;
font-weight: bold;
}
input[type="file"] {
cursor: pointer !Important;
}
input[type="file"]::-webkit-file-upload-button {
border: none;
padding: 5px 12px;
background: #9e2baf;
color: #fff;
font-size: 1em;
transition: all .4s;
cursor: pointer;
border-radius: 20px;
}
input[type="file"]::-ms-browse {
border: none;
padding: 5px 12px;
background: #9e2baf;
color: #fff;
font-size: 1em;
transition: all .4s;
cursor: pointer;
border-radius: 20px;
}
<label class="file-label" for="input-file">Attach file:</label>
<br /> <input type="file" name="attachment[]" multiple="multiple">
Yes you can, this is one of the most used hacks for styling file-input.
Take a look at http://www.quirksmode.org/dom/inputfile.html
May be you can hide the input element and make use of a div for styling purposes..
<input type="file" id="myFileInput" onchange="$('#myFileDiv').text($(this).val());" style="display:none;" />
<div id="myFileDiv" onclick="$('#myFileInput').click();">
Select File..
</div>
I'm having some trouble with my CSS on my page in IE 8. I have a text field floated to the left, a 'next' button floated to the right, and underneath I have some text in a seperate div.
<div id="code_bit">
<h2>Enter your 16 digit code</h2>
<input type="text" name="activation_code" id="activation_code" value="<% $activation_code | h %>" size="16" />
<input id="next_button" type="button" name="signup" value="Next" onclick="this.form.submit();" />
</div>
<div id="bottom_bit">
<div id="service_highlights">
Some text
</div>
#bottom_bit {
width: 616px;
position: relative;
margin: 50px auto 30px 215px;
}
#bottom_bit #service_highlights {
padding: 15px 0px;
border-bottom: 1px solid #bdbdbd;
border-top: 1px solid #bdbdbd;
font-size: 14px;
color: #000;
text-align: center;
}
signup_bit input {
color: #000;
height: 32px;
padding: 2px;
text-align: left;
margin: 10px 0px 10px 2px;
float: left;
display: block;
}
#signup_bit #info{
width: 350px;
text-transform: none;
font-size: 10pt;
color: #000000;
float: left;
}
#signup_bit #activation_code {
font-size: 20px;
width: 290px;
text-transform: uppercase;
padding: 3px;
}
#signup_bit #next_button {
background: #fff;
border: none;
cursor: pointer;
color: #63a8d8;
height: 35px;
padding: 2px;
text-align: right;
float: right;
text-decoration: underline;
}
As you can see, the two elements have been floated. What happens is, when you first view this page, the text underneath the form elements, is wrapped in between the form elements, and then after a few seconds, it snaps into the place it should be.
Are there any IE 8 bugs that can workaround this? I've tried clearing the floats, and some of the other obvious ones with no luck.
Hope you can help, and sorry for the long code,
Snakespan
It looks like all you need is a clearing element below your two floated elements. You had also pasted some invalid CSS, so I've fixed it to match your HTML.
<div id="code_bit">...</div>
<br style="display: block; clear: both;" />
<div id="bottom_bit">...</div>
A working example can be seen at jsFiddle: http://jsfiddle.net/kTyaj/
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!