I have a textarea with random base64 code in it. The text inside it has a annoying thin red line underlining it in Opera.
Is there a opera html attribute that can disable the spell checker on that field?
spellcheck="false" seems to work in Chrome, but not in Opera
Have you tried making the textarea readonly by adding
readonly="readonly"
?
Or does the BASE64 code need to be editable?
Related
On my ASP.NET site, <input type="file"> renders like this in IE11 (an oldschool look):
However, I want it to look like this (more modern look):
When trying <input type="file"> in the same IE11 elsewhere, in e.g. JSFiddle, it looks like I want it to (the more modern look).
I tried tracing CSS styles using F12 dev tools, but I cannot see any styles resulting in the oldschool look.
I'm using <!DOCTYPE html>.
My question: What might be causing the oldschool look?
IE11 Renders that way.
If you want to change it you should use CSS, but it usually isn't easy.
What I usually do is to create my own fake component, with an input type text and a button styled the way I want.
I also have a input type file hidden, when I push my styled button I send via javascript a click to hidden input type file. When the file is selected I update my styled input type text with selected file name.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
input {
border-width: 2px; /* causes button to change dramatically in IE and FireFox */
}
</style>
</head>
<body>
<input type="button" value="Print"/>
</body>
</html>
If I let each browser render the button without any styles, they all look similar to this:
As an example, with IE 8, the default border width is 2px. What I did was add a style for the button that sets the border width to 2px. So, I haven't changed the border width at all. However, upon reloading the page, the button now looks like this:
I don't understand it at all. I looked at Developer Toolbar, Opera's Dev tool, Firebug, Safari's Dev tool, and analyzed each button. Why is it that FireFox and IE cause the button to change so dramatically, while Safari, Chrome, and Opera keep the look and feel exactly the same? I don't understand why the button changes color and loses it's 'rounding' and becomes 'square'.
I even added the YUI reset link that I've been seeing everywhere, researching this problem, and it didn't help.
What am I doing wrong?
I just want to make the button's border, padding, and margin even across all browsers so they look the same, while keeping it's look and feel like the default button (), but IE and FireFox are making that difficult at the moment.
Thank you.
This is simply a difference in how browsers render buttons. You aren't doing anything wrong; it's just a cross browser rendering issue. In and of itself you can't cause them to render their default button graphics identically.
If you want to have the exact same look and feel for your buttons across all browsers, my advice is that you create them with CSS. It is more code but it gives you the precise control you're looking for.
There are some excellent CSS button makers out there. Here is one.
http://css-tricks.com/examples/ButtonMaker/
HTH!
Setting the border to none worked for me (on IE9/IE10):
border: none;
Setting it to nothing (i.e. border:;) also worked.
i m using one disabled textbox in my page .it is looking disabled in mozilla firefox but looking like a simple textbox in IE.what to do to give it a disabled look in IE also.
Depending on the version of IE you are testing with, you can change the background colour of the textbox yourself using CSS:
background-color: #999999
Other than that, there isn't a whole lot you can do. Older versions of IE are a pain to work with, and form elements are notorious for lacking styling support.
Usually disable behavior is the other way around; you can't override all the styling IE places on disabled HTML controls. But you can in FireFox and other browsers. If you need to give an appearance of not being disabled when actually being disabled, you should look at using a Label server control to display what you need.
I have the following markup on a page and unfortunately I do not have direct access to it. . This page is opened in an iframe. There is other code on the page but it is not relevant so I have not posted it.
The only access to target the code in via css.
I want to not display the close button so I added this to the css file
img[alt='Close'] {display:none !important;}
this is the markup
<td align="center"><a href='javascript:window.close()'><img src='v/vspfiles/templates/100/images/buttons/btn_close.gif' alt='Close' border=0></a></td>
It works as expected in all browsers that i have tested (firefox, Opera, Safari) but in IE8 it seems to ignore this css and shows the button. Not sure if it doesn't like the selector or perhaps I have a syntax error.
Not sure where to go from here.
IE8 supports Attribute Selectors, but only when the page is setup for "standards-compliant mode". The following provides more information:
http://msdn.microsoft.com/en-us/library/aa770069.aspx [Read the Remarks Section]
http://msdn.microsoft.com/en-us/library/cc288325.aspx
Also the following link tells you what DTD turns standards compliance mode "on" in IE8
http://msdn.microsoft.com/en-us/library/ms535242.aspx [Scroll to the table]
How does one style a form input field of type file for Safari, Chrome, and other WebKit-based browsers?
Right now, all I get is the Choose File button displayed on top of the usual text input box.
I've looked around a bit on Google, but haven't really seen anything helpful.
All rendering engines automatically generate a button when an is created. Historically, that button has been completely un-styleable. However, recently Trident and WebKit have added hooks through pseudo-elements.
Trident
As of IE10 the file input button can be styled using the ::-ms-browse pseudo-element. Basically any CSS rules that you apply a regular button can be applied to the pseudo-element. For example:
<input type="file">
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
This displays as follows in IE10 on Windows 8:
WebKit
WebKit provides a hook for its file input button with the ::-webkit-file-upload-button pseudo-element. Again pretty much any CSS rule can be applied, therefore the Trident example will work here as well:
<input type="file">
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
This displays as follows in Chrome 26 on OS X:
Few days ago I had task to stylize an input="file" with CSS (mostly CSS3 with extra effects) and it is possible to do that.
I've written (or made small rewrites to filestyle plugin) a jQuery plugin. Its core behaviour is the same with images but I've totally replaced images with spans and divs. The plugin hides input="file" then builds a wrapper with CSS and finally triggers click actions on hidden input.
I hope it will be helpful for everyone.
Here's an example of how to style input="file" with only CSS.
I don't believe that you can. Apple only recently decided to enable styling of their form controls. They believe that it's harder to find buttons and inputs when they don't look like buttons an inputs - so they might not let you style their file upload inputs yet.
I'm around 90% sure you can't do it.
Firefox 4 will let you style input elements (in a round about way): link
Hopefully the other browsers will catch on to what an enormous pain point this removes.
If your only interested in webkit browsers, you can use their built in pseudo selectors to target different parts of the file input element. input::-webkit-file-upload-button {...}, for example.
Having a Flash uploader can give even more pain:
It is only working in IE in the same session as your browser and in all other browers it makes a new session, so you will kicked out of your back end secure app.
The only solution to that is sending your session data to the Flash as well... there you go!
I landed on this page looking or ways to style the file input item for Safari... I have lots of them in a table cell of only 150px wide but these inputs are forcing it bigger.
I have found just one solution until now, and that is to let them float above the rest using style="position:absolute;z-index:2" while my TD has position:relative styling.
It's a bad bad solution, I know!