does anyone know how to put background image inside a textbox? i want to do is when i click the textbox it will change the background with an image.Does anyone know how to do that?
my current code wont work:
<input onfocus="this.style.background='images/activebutton.png'" />
CSS is the preferred method
CSS
<style>
input[type="text"]:focus{
background-image: url('images/activebutton.png');
}
</style>
HTML
<input type="text" />
If you still want to use JavaScript you need to do like this
<input type="text"
onfocus="this.style.backgroundImage='url(images/activebutton.png)';"
onblur="this.style.backgroundImage=''"
/>
<input class="changeonfocus"/>
CSS
.changeonfocus:focus{
background-image: url('image.png');
}
DEMO
<input type="text" class="litebox_input">
.litebox_input:focus {
background-image: url(images/edit.png);
background-repeat:repeat-y;
background-position:right;
}
Use some css styling:
inputBox{
background:url('images/activebutton.png');
}
To put a background image inside an input element you need to set background-image in CSS:
input {
background-image: url('image.png');
}
You can do it programmatically via JavaScript by adding/removing a class, or directly using this.style.backgroundImage. So here's an example:
<input id="i" type="text" />
var i = document.getElementById('i');
i.addEventListener('click', function() {
i.style.backgroundImage = "url('image.png')";
});
Demo
I'm currently using following login form where I want to change the design a bit:
http://html-form-guide.com/php-form/php-login-form.html
I want to place ' Login ' into the middle of the box, instead the left:
I've also found out that you can change the textsize, font etc. in fg_membersite.css (line 17). What's interesting is that in Chrome it IS displayed in the middle, only in Firefox it's shown on the left. Since I'm a new CSS worker I wanted to ask if anybody could help me fixing this incompatiblity problems here.
Since it also contains lots of Javascript based stuff I wasn't sure if I posting source codes here would be sensible, because I'd have to post the whole source anyway then.
Thanks in advance!
EDIT: Much prettier now. Thanks:
http://rapidhdd.com/images/4013242013-10-06_1842.png
Use this for the center text part:
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<fieldset >
<legend align="center">Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password*:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' name='Submit' value='Submit' />
</fieldset>
</form>
I guess you've changed the HTML code but note the: <legend align="center">Login</legend>
align="center"
http://jsfiddle.net/4szBC/
EDIT:
Since it seems like align is deprecated you, can do this using by using css.
legend {
text-align: center;
}
If you want the css right in HTML, add it in a <script> tag and place it in <head>. Like this:
<script type="text/css">
legend {
text-align: center;
}
</script>
http://jsfiddle.net/4szBC/1/
add to submit button few CSS rules:
input[type=submit] {
display: inline-block;
margin: 0 auto;
padding: 10px 30px;
}
My navbar has dropdown "fieldsets" for login and search like this:
<div class="nav-button" id="nav-box">
<a class="inside-link">
<span id="inside-text">Sign in</span>
</a>
<fieldset id="menu-box" class="menu-box">
<form method="post" id="forms" class="forms" action="checklogin.php">
<label for="username">Username or email</label>
<input type="text" id="username" name="username" value="" title="username" tabindex="4">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="" title="password" tabindex="5">
<input type="submit" id="small-btn" value="Sign in" tabindex="6">
<input type="checkbox" id="remember" name="remember_me" value="1" tabindex="7">
<label for="remember">Remember me</label>
<br />
Forgot your password?
<a id='forgot_username_link' title="If you remember your password, try logging in with your email" href="#">Forgot your username?</a>
</form>
</fieldset>
</div>
I have a fiddle here: http://jsfiddle.net/WBrns/5/
While input boxes like "search" "username" and "password" are focused, I'd like the associated dropdown to not disappear so users don't have to keep their mouse within the dropdown while typing.
Line 288 in the CSS was our first attempt which obviously doesn't work. My site already includes jQuery so any js/jquery solution is acceptable (since I think it's not possible with pure css)
Thanks!
On your hover style, make sure the attributes have the !important command and then use the code below while remembering to substitute the id's and classes to what you need:
$("input").focus(function () { that=this;
$(this).parent(".drop").css("display", "block");
$(this).blur(function() {
$(that).parent(".drop").css("display", "none");
});
})
You can take a look at an example here: http://jsfiddle.net/WBrns/12/
If a user begins to type, the drop down should not disappear even if they move their mouse away. However, if they click outside of the drop down, it will be hidden.
To improve upon Shaz's answer, you can name the blur event to prevent multiple blur events from being attached to the same input. I also recommend using a class name and CSS to show and hide the drop down so that you can take advantage of CSS transitions.
JS
$('input').focus(function () {
var $this = $(this);
var $drop = $this.parents('.drop');
$drop.addClass('open');
$this.bind('blur.closeDrop', function () {
$drop.removeClass('open');
$this.unbind('blur.closeDrop');
});
});
CSS
.drop {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.drop.open {
opacity: 1;
pointer-events: auto;
}
Im implementing a site with shopping cart features and want the user to be able to select the color for the product they are purchasing.
Let's say I started with something like this:
<form action="">
<input type="radio" name="color" value="red" />
<input type="radio" name="color" value="green" />
<input type="radio" name="color" value="black" />
</form>
What CSS is needed to show coloured boxes for each of the options, with the boxes displayed horizontally and have a border around the selected option?
Along the lines of:
[redbox] [greenbox] [blackbox]
You can check out jQuery UI's Button http://jqueryui.com/demos/button/#radio
It allows you to create nice styles for checkboxes/radio buttons and so on..
I'm not sure if you'd want to use a whole framework for that though, but as far as I know, radio buttons aren't very 'stylable'. You'd need to create another element next to it, and change the selected value of the radio button programatically.
Hope this helps,
Marko
Because each browser is going to render the button differently, I would use a series buttons that are altering the state of a hidden input field. (I didn't test this, but it's the general idea):
<form id="myForm" action="">
<input type="hidden" id="color" name="color" value="red" />
<button type="button" style="background-color:red; width:50px; height:50px;"></button>
<button type="button" style="background-color:green; width:50px; height:50px;"></button>
<button type="button" style="background-color:blue; width:50px; height:50px;"></button>
</form>
<script>
/* I like jQuery, sue me ;) */
$(function() {
$('#myForm button').click(function() {
$('#color').val($(this).css('background-color'));
$(this).siblings('button').css('border','none');
$(this).css('border','2px solid black');
});
});
</script>
I would think that you wouldn't use radio boxes. You can have a hidden input field that stores the color, and 3 div's for the color boxes. onclick events would handle setting the classes so the selected item has the border and the hidden value is set.
Using jQuery it would look something like this:
<style type=text/css>
.cchoice { width:10px; height:10px; }
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
.cpicked { border:2px solid yellow; }
</style>
<input type="hidden" name="colorChoice" id="colorChoice" value="">
<div id="cc_Red" class="cchoice red" onclick="makeChoice('red');">
<div id="cc_Green" class="cchoice green" onclick="makeChoice('green');">
<div id="cc_Blue" class="cchoice blue" onclick="makeChoice('blue');">
<script type=text/javascript>
function makeChoice(col) {
if (col != 'green') $('#cc_Green').removeClass('cpicked');
if (col != 'blue') $('#cc_Blue').removeClass('cpicked');
if (col != 'red') $('#cc_Red').addClass('cpicked');
$('#colorChoice').val(col);
}
</script>
Even if I have some syntax wrong, maybe this will set you on the right path?.. let me know if I can be of more help.
Like a lot of people, I'd like to customize the ugly input type=file, and I know that it can't be done without some hacks and/or javascript. But, the thing is that in my case the upload file buttons are just for uploading images (jpeg|jpg|png|gif), so I was wondering if I could use a "clickable" image which would act exactly as an input type file (show the dialog box, and same $_FILE on submitted page).
I found some workaround here, and this interesting one too (but does not work on Chrome =/).
What do you guys do when you want to add some style to your file buttons? If you have any point of view about it, just hit the answer button ;)
This works really well for me:
.image-upload>input {
display: none;
}
<div class="image-upload">
<label for="file-input">
<img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
</label>
<input id="file-input" type="file" />
</div>
Basically the for attribute of the label makes it so that clicking the label is the same as clicking the specified input.
Also, the display property set to none makes it so that the file input isn't rendered at all, hiding it nice and clean.
Tested in Chrome but according to the web should work on all major browsers. :)
EDIT:
Added JSFiddle here: https://jsfiddle.net/c5s42vdz/
Actually it can be done in pure css and it's pretty easy...
HTML Code
<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>
CSS Styles
label.filebutton {
width:120px;
height:40px;
overflow:hidden;
position:relative;
background-color:#ccc;
}
label span input {
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
top: -2px;
left: -700px;
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
}
The idea is to position the input absolutely inside your label. set the font size of the input to something large, which will increase the size of the "browse" button. It then takes some trial and error using the negative left / top properties to position the input browse button behind your label.
When positioning the button, set the alpha to 1. When you've finished set it back to 0 (so you can see what you're doing!)
Make sure you test across browsers because they'll all render the input button a slightly different size.
Great solution by #hardsetting,
But I made some improvements to make it work with Safari(5.1.7) in windows
.image-upload > input {
visibility:hidden;
width:0;
height:0
}
<div class="image-upload">
<label for="file-input">
<img src="https://via.placeholder.com/300x300.png?text=UPLOAD" style="pointer-events: none"/>
</label>
<input id="file-input" type="file" />
</div>
I have used visibility: hidden, width:0 instead of display: none for safari issue and added pointer-events: none in img tag to make it working if input file type tag is in FORM tag.
Seems working for me in all major browsers.
Hope it helps someone.
A much better way than writing JS is to use native,
and it turns to be lighter than what was suggested:
<label>
<img src="my-image.png">
<input type="file" name="myfile" style="display:none">
</label>
This way the label is automatically connected to the input that is hidden.
Clicking on the label is like clicking on the field.
You can replace image automatically with newly selected image.
<div class="image-upload">
<label for="file-input">
<img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
</label>
<input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
</div>
<script>
function previewFile(input){
var file = $("input[type=file]").get(0).files[0];
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
</script>
I would use SWFUpload or Uploadify. They need Flash but do everything you want without troubles.
Any <input type="file"> based workaround that tries to trigger the "open file" dialog by means other than clicking on the actual control could be removed from browsers for security reasons at any time. (I think in the current versions of FF and IE, it is not possible any more to trigger that event programmatically.)
This is my method if i got your point
HTML
<label for="FileInput">
<img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
<input type="file" id="FileInput" style="cursor: pointer; display: none"/>
<input type="submit" id="Up" style="display: none;" />
</form>
jQuery
<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>
I have had lots of issues with hidden and not visible inputs over the past decade sometimes things are way simpler than we think.
I have had a little wish with IE 5,6,7,8 and 9 for not supporting the opacity and thus the file input would cover the upload image however the following css code has resolved the issue.
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
The following snipped is tested on chrome, IE 5,6,7,8,9,10 the only issue in IE 5 is that it does not support auto margin.
Run the snippet simply copy and paste the CSS and HTML modify the size as you like.
.file-upload{
height:100px;
width:100px;
margin:40px auto;
border:1px solid #f0c0d0;
border-radius:100px;
overflow:hidden;
position:relative;
}
.file-upload input{
position:absolute;
height:400px;
width:400px;
left:-200px;
top:-200px;
background:transparent;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.file-upload img{
height:70px;
width:70px;
margin:15px;
}
<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>
its really simple you can try this:
$("#image id").click(function(){
$("#input id").click();
});
You can put an image instead, and do it like this:
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
CAVEAT:
In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.
The input itself is hidden with CSS visibility:hidden.
Then you can have whatever element you whish - anchor or image.., when the anchor/image is clicked, trigger a click on the hidden input field - the dialog box for selecting a file will appear.
EDIT: Actually it works in Chrome and Safari, I just noticed that is not the case in FF4Beta
Working Code:
just hide input part and do like this.
<div class="ImageUpload">
<label for="FileInput">
<img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
</label>
<input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer; display: none"/>
</div>
form input[type="file"] {
display: none;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Simple File Upload</title>
<meta name="" content="">
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<label for="fileToUpload">
<img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
</label>
<input type="File" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!
<script type="text/javascript">
function upl() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.setAttribute('name', 'uploimg');
fileSelector.setAttribute('accept', 'image/*');
fileSelector.click();
fileSelector.style.display = "none";
fileSelector.onchange = function() {
document.getElementById("indicator").innerHTML = "Uploaded";
};
document.getElementById("par_form").appendChild(fileSelector);
}
</script>
<form id="par_form">
<img src="image_url" onclick="upl()"><br>
<span id="indicator"></span><br>
<input type="submit">
</form>