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>
Related
I'm setting JavaScript class to the p, so it should change a colour when it's clicked, here is <p> element:
<p class="classItem"></p>
Here is classItem css class:
.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}
And there you can see background color(#3266cc) - blue, I want to change it to red on a click, so I created css class
.activeClassItem {
background-color: red!important;
}
And on javascript I said, when I click this item let's apply also activeClassItem class, so it will set a colour of background to red, and class is really applied but colour is not changed:
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});
When I inspect window, class is there:
<p class="classItem activeClassItem"></p>
So guys, even if Class is applied I can not see changed background unfortunatelly...
Any kind of help is awesome,
Thanks
Here is a working example , if still the issue persist , please consider testing with another browser or try to update your browser
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});
.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}
.activeClassItem{
background-color:red !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p class="classItem"></p>
</body>
I have this code to embed on my site from Setmore to allow appointment booking on the website, this opens a popup in the website like you would expect on a hotel booking website.
<script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe/setmore_iframe.js"></script><a id="Setmore_button_iframe" style="float:none" href="https://my.setmore.com/bookingpage/c6461561-7478-43ef-97ee-d4e8d6c89436"><img border="none" src="https://my.setmore.com/images/bookappt/SetMore-book-button.png" alt="Book an appointment with HouseKeep using SetMore" /></a>
This uses a really boring button so I made a custom one in photoshop to replace. However, I wanted to make one in CSS so that it changes when the user hovers over it.
<Center>
<button class="button button1">BOOK NOW</button>
</Center>
<style>
.button {
background-color: #2f896b; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #2f896b;
}
.button1:hover {
background-color: #2f896b;
color: white;
</style>
I Would like to make it so that I can use the button that I've made but it still has the exact same functionality as the image being there in the original code to code to embed. Any ideas?
By Adding this below CSS you can easily override the Setmore button.
This Below CSS will help you to do following changes
Text of Setmore button
Add Hover Effect
Change Button Style
a#Setmore_button_iframe
{
position: relative;
}
a#Setmore_button_iframe > img {
display: none;
}
a#Setmore_button_iframe:after
{
content:"Book Free Appointment"; /* TEXT YOU WANT */
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #27C3BB;
font-family: sans-serif;
}
a#Setmore_button_iframe:hover:after {
background-color: #27C3BB;
color: white;
}
For Demo Check this link Setmore Custom Button
Have you tried setting button's background to the one you made? Check it below:
background: url("../images/button.png") no-repeat;
I want the html button to look like the image below. Is there way to change its layout without using any html element?
UPDATED: In the normal button, there is only one text node, but in this case there are two text nodes.
Not quite sure with statement "without using any html element", but you can just styling it using css(anything you want), see example below:
Code:
.myButton {
width: 150px;
height: 120px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-color: #6ED7DB;
color: #fff;
border: 1px solid #fff;
font-weight: bold;
font-size: 2em;
padding: 10px;
}
<button class="myButton">INFO
<br/>IRO4</button>
Example
You need to use CSS if you want to change the style of the button, and use this selector (input[type="button"]) if you want it to change all the button using the same style.
input[type="button"] {
background:violet;
padding: 20px;
border: none;
border-radius: 3px;
}
<input type="button" value="test" />
Check the example below:
Code:
a {
text-decoration: none;
}
.btn {
display: block;
background: #6ED7DB;
border-radius: 12px;
text-align: center;
text-decoration; none;
padding: 20px;
color: #FFF;
width: 150px;
}
<a href="#" class="btn">
<p>INFO</p>
<h1>IR04</h1>
</a>
Example
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Change cursor type on input type=“file”
This is my jsfiddle:
http://jsfiddle.net/3zNMK/
This class already has a cursor but not working:
.file
{
cursor:pointer;
}
I want that even though a hover is made on textbox inside input type file, it should change to hand icon. But it is not working.
Any way to change this behavior?
Try some manipulation like this
HTML
<span class="file-wrapper">
<input type="file" name="photo" id="photo" />
<span class="button">Choose a File</span>
</span>
CSS
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #333;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
padding: 4px 18px;
text-transform: uppercase;
}
DEMO
You used cursor:hand; on your fiddle, this is outdated.
if you use cursor:pointer;, the hand cursor will appear when you hover your input.
cursor:hand is understood by few old browser, like IE6. User cursor:pointer instead
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!