I have a requirement to have 2 number inputs that show the spinner control (up down arrows that increment/decrease the input value).
<input type="number"/>
The problem is that IE does not have support to visibly show the spinner. There is a jQuery solution using jqSpinner, but I would like to stay clear of jQuery, as it does not play nicely in my angular app.
Does anyone have a solution for this, I can't find an answer for this anywhere. (I have looked at all the similar answers, no duplicate question discusses a non-jQuery solution)
By JavaScript to control, maybe this is what you want
var fontSize = document.getElementById('fontSize');
function updateSize() {
testDrive.style.fontSize = fontSize.value + 'px';
}
fontSize.addEventListener('change', updateSize, false);
updateSize();
<style type="text/css">
.textbox0 {
width: 3em;
background: #f1f1f1;
padding: .25em .5em;
line-height: 1.5;
height: 1.5em;
}
</style>
Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
min="8" value="48" />
px
browsers like IE (v9 and lower) do have problems with HTML5 tags and HTML5 input types.
In order to get all your HTML5 tags working and input types like number, tel etc working, place the following code between the <head></head> tags:
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
This is conditional IE script for HTML5 Shiv/HTML5 shim (or shim: which in computing language means a workaround). It is commented. So it is checked if the browser being used is IE or not, that's the first statement in the above code. If it is, this workaround is run and helps you use your HTML5 specific input values and tags.
Cheers!
I have the text are below from a program that I am working on.
<div etype="TEXTAREA" style="width: 923px; position: absolute; left: 1px; top: 192px; " class="draggable ui-draggable" id="Element_5857257">
<label>Log</label>
<textarea variable="Log" class="form-control" style="white-space: nowrap; margin-left: 0px; margin-right: -6px; width: 923px; margin-top: 0px; margin-bottom: 0px; height: 364px; " placeholder="Log"></textarea>
</div>
I am trying to disable this text area and make it read only. I have no experience with CSS so I am not sure if this is even possible?
Like so
<textarea disabled>
strings...
</textarea>
in your example just add disabled property to you textarea tag
MDN Documenation:
Textarea
Two options:
disabled:
This Boolean attribute indicates that the user cannot interact with the control. (If this attribute is not specified, the control inherits its setting from the containing element, for example ; if there is no containing element with the disabled attribute set, then the control is enabled.)
readonly:
This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.
Use whichever fits your use case the best.
HTML solution:
<textarea disabled="true"></textarea>
JavaScript solution:
var textarea = document.getElementsByTagName("textarea");
textarea = textarea[0];
textarea.SetAttribute("disabled", "true");
Here's edited answer to reflect OP's updated code:
<script type="text/javascript">
var textarea = document.querySelector("textarea.form-control");
textarea.SetAttribute("disabled", "true");
</script>
If you wish, you would copy that bit of JS, and place it probably at the end of <body>. Or, you might simply just add disabled to the textarea HTML tag. If this is still not the solution you're expecting, then you need to rewrite your question.
You can't disable a textarea just with CSS, with CSS you can "paint" it to looks like disabled:
#myTxtarea:disabled {background-color: #EEEEEE;}
but it's still accessible, just looks "different".
This question already has answers here:
Styling an input type="file" button
(46 answers)
Style input type file? [duplicate]
(6 answers)
Closed 9 years ago.
I did some research and found it could be hard to style a input type=file. However, I realized youtube has a beautiful button displayed when you want to upload your video to the site. (may need login: http://www.youtube.com/upload).
so basically it allows user to click the button, pick a file, and do the upload. I am not sure how this is implemented instead of using the ugly <input> tag? Or anyone knows any alter good way to make a beautiful file upload interface?
LIVE DEMO
<button id="imageDrop" onclick="document.getElementById('uploadImage').click()" title="Click or Drag Image">Upload image</button>
<input id="uploadImage" type="file" />
#imageDrop{
background:#fff;
width:300px;
height:180px;
font-size:20px;
font-style:italic;
border-radius:18px;
border:2px dashed #444;
}
#uploadImage{
visibility: hidden;
height:0px;
width: 0px;
}
I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox).
Please notice that I'm talking not about the text inside the input field, but about the tooltip that appears when you move the mouse over the input.
I've tried this with no luck:
$('#myFileInput').attr('title', '');
The default tooltip can be edited by using the title attribute
<input type='file' title="your text" />
But if you try to remove this tooltip
<input type='file' title=""/>
This won't work. Here is my little trick to work this, try title with a space. It will work.:)
<input type='file' title=" "/>
For me, I just wanted the text to be invisible and still use the native browser button.
input[type='file'] {
color: transparent;
}
I like all of undefined's suggestions but I had a different use case, hope this helps someone in the same situation.
This is a native part of the webkit browsers and you cannot remove it. You should think about a hacky solution like covering or hiding the file inputs.
A hacky solution:
input[type='file'] {
opacity:0
}
<div>
<input type='file'/>
<span id='val'></span>
<span id='button'>Select File</span>
</div>
$('#button').click(function(){
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function(){
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})
Fiddle
Very easy, forget CSS targeting the input["type"] thing, it doesn't work for me. I don't know why. I got my solution in my HTML tag
<input type="file" style="color:transparent; width:70px;"/>
End of the problem
I found a solution that is very easy, just set an empty string into the title attribute.
<input type="file" value="" title=" " />
You can disable the tooltip setting a title with a space on webkit browsers like Chrome and an empty string on Firefox or IE (tested on Chrome 35, FF 29, IE 11, safari mobile)
$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
This one works for me (at least in Chrome and Firefox):
<input type="file" accept="image/*" title=" "/>
This is a tricky one. I could not find a way to select the 'no file chosen' element so I created a mask using the :after pseudo selector.
My solution also requires the use of the following pseudo selector to style the button:
::-webkit-file-upload-button
Try this: http://jsfiddle.net/J8Wfx/1/
FYI: This will only work in webkit browsers.
P.S if anyone knows how to view webkit pseudo selectors like the one above in the webkit inspector please let me know
Across all browsers and simple. this did it for me
$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})
input[type="file"]{
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">
All the answers here are totally overcomplicated, or otherwise just totally wrong.
html:
<div>
<input type="file" />
<button>Select File</button>
</div>
css:
input {
display: none;
}
javascript:
$('button').on('click', function(){
$('input').trigger('click');
});
http://jsfiddle.net/odfe34n8/
I created this fiddle, in the most simplistic way. Clicking the Select File button will bring up the file select menu. You could then stylize the button any way you wanted. Basically, all you need to do is hide the file input, and trigger a synthetic click on it when you click another button. I spot tested this on IE 9, FF, and Chrome, and they all work fine.
You will need to customise the control quite a lot to achieve this.
Please follow the guide at: http://www.quirksmode.org/dom/inputfile.html
Wrap with and make invisible.
Work in Chrome, Safari && FF.
label {
padding: 5px;
background: silver;
}
label > input[type=file] {
display: none;
}
<label>
<input type="file">
select file
</label>
It's better to avoid using unnecessary javascript. You can take advantage of the label tag to expand the click target of the input like so:
<label>
<input type="file" style="display: none;">
<a>Open</a>
</label>
Even though input is hidden, the link still works as a click target for it, and you can style it however you want.
Even you set opacity to zero, the tooltip will appear. Try visibility:hidden on the element. It is working for me.
It works for me!
input[type="file"]{
font-size: 0px;
}
Then, you can use different kind of styles such as width, height or other properties in order to create your own input file.
Give -webkit-appearance: a go. Worth a try anyway.
http://css-infos.net/property/-webkit-appearance
Hope that helps :)
Directly you can't modify much about input[type=file].
Make input type file opacity:0 and try to place a relative element [div/span/button] over it with custom CSS
Try this
http://jsfiddle.net/gajjuthechamp/pvyVZ/8/
Surprise to see no one mentioned about event.preventDefault()
$("input[type=file]").mouseover(function(event) {
event.preventDefault();
// This will disable the default behavior of browser
});
you can set a width for yor element which will show only the button and will hide the "no file chosen".
I look for good answer for this... and I found this:
First delete the 'no file chosen'
input[type="file"]{
font-size: 0px;
}
then work the button with the -webkit-file-upload-button, this way:
input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}
hope this is what you were looking for, it works for me.
Combining some of the suggestions above, using jQuery, here is what I did:
input[type='file'].unused {
color: transparent;
}
And:
$(function() {
$("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};
And put the class "unused" on your file inputs. This is simple and works pretty well.
The best solution, for me, is to wrap input [type="file"] in a wrapper, and add some jquery code:
$(function(){
function readURL(input){
if (input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function (e){
$('#uploadImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#image").change(function(){
readURL(this);
});
});
#image{
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 75px;
height: 35px;
}
#uploadImage{
position: relative;
top: 30px;
left: 70px;
}
.button{
position: relative;
width: 75px;
height: 35px;
border: 1px solid #000;
border-radius: 5px;
font-size: 1.5em;
text-align: center;
line-height: 34px;
}
<form action="#" method="post" id="form" >
<div class="button">
Upload<input type="file" id="image" />
</div>
<img id="uploadImage" src="#" alt="your image" width="350" height="300" />
</form>
I came up with a hacky solution that totally removes "No file chosen" plus the extra space that is added after that text (in Chrome I get something like:
"No file chosen ").
This was totally messing up my page alignment, so I really fought with it to find a solution. Inside the input tag's style attribute, setting "width" to the width of the button will eliminate the trailing text and spaces. Since the width of the button is not the same in all browsers (it's a little smaller in Firefox, for example), you'll also want to set the style's color to the same color as the background of the page (otherwise a stray "No" may show through). My input file tag looks like this:
<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">
I know it is a bit of a hack, but all I required was to set the color to transparent in the style sheet - inline would look like this style="color:transparent;".
Best option to Hide the tooltip is combining the following properties :
On the input : color:white; (if the background is white to blind the color of text, if another color, use that color).
if there is any other element next to the input use position: absolute; to place the element above the tooltip *( be careful leave the button visible, hide just the tooltip)
For anybody that the 3 top did not work:
create your input element:
<input type='file' name='file' id='file' />
set style for the input element by it's Id to where it appears non-existent:
#file{ color: #ffffff; width: 0px; }
then create a new button infront of the original input, with onclick function to run javascript that clicks the original input:
<button onclick='clicker()'>BROWSE</button><input type='file' name='file' id='file' />
// can see the new button but not the original input:
Javascript:
function clicker(){ document.getElementById('file').click(); }
RESULT:
function clicker(){
document.getElementById('file').click();
}
#file{
color: #ffffff;
width: 0px;
}
<html>
<head>
</head>
<body>
FILE: <button onclick='clicker()'>BROWSE</button><input type='file' id='file'/>
<br>
</body>
</html>
style="color: transparent; width:110px"
This solution worked for me as below:
<input class="ml-4"
type="file"
style="color: transparent; width:110px"
ng2FileSelect
[uploader]="uploader"
multiple />
Forget about removing the tooltip. Make the capacity of file input into zero, put a div box above it with absolute position, so whenever you click on the div, the file input would prompt.
<div class="file_cover">Click to upload file</div>
<input type="file">
input[type='file'] {
opacity: 0;
}
.file_cover {
position: absolute;
top: 0;
}
I want to change the image of my button when the mouse goes over it.
I rode the DHTML event onmouseover, can do that for me, but how?
Do i need to create a javascript also for it?
What should i do to make it work?
This is my current code:
<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="/resources/images/mainbtn2.png"/">
The <h:commandButton image="foo.png"> generates a HTML <input type="image" src="foo.png">. The onmouseover attribute (like as all on* attributes) should point to JavaScript functions. However, you're putting the image path plain there. This would only result in a JavaScript error (which you would have noticed if you were using Firebug or WDT).
You need to write some JS which changes the src attribute of the image button accordingly:
onmouseover="this.src='/resources/images/mainbtn2.png'"
Don't forget to add an onmouseout which changes the image back.
Unrelated to the concrete problem, the normal practice is to use CSS background images for this. The HTML <input type="image"> has technically an entirely different purpose. It represents namely an image map which allows you to send the mouse coordinates of where you have clicked in the image map. You're apparently not interested in this information as you're not using a static image.
E.g.
<h:commandButton value="" styleClass="mybutton" />
which generates
<input type="submit" value="" class="mybutton" />
and add this CSS (kickoff example)
.mybutton {
margin: 2px;
padding: 0;
border: 0;
width: 100px;
height: 20px;
background-image: url('foo.png');
cursor: pointer;
overflow: visible;
}
.mybutton:hover {
background-image: url('bar.png');
}
This is not only better reuseable/maintainable, but also doesn't require JS support.
Yes, all onXXX attributes are for JavaScript event handlers. You need to have a JavaScript function written for that. Something like this:
function changeImage() {
this.style.backgroundImage = "url('path/to/image.png')";
}
And invoked using:
<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="changeImage()" />
Note: I can't provide you the exact JavaScript as it entirely depends on how the markup is generated by the JSF library that you're using.