I have a style that I apply to my buttons. Can I apply the same style to the button of the file upload element without affecting the entry field?
<input type="file" name="myFile">
The designing of file element is not supported by almost all browser. Some browser allow it and some browser does not allow it.
You can not make it browser compatible. Basically you do not have complete control to design it.
You can also go with this article
Due to security concerns, browsers doesn't allow you to edit or style the upload button. It can be exploited to trick the user. Example
Related
I'm working on an existing project and make some fixes for accessibility support. One of the items from my accessibility list refers to the ShareThis social buttons. For some reason it doesn't support navigation from keyboard. I've added "tabindex=0" attribute to all social icons <span> elements. So now I can navigate, but I can't activate it by clicking "Enter". Do I really need to write my own JS functions for all this buttons? Maybe there is accessability solution that somebody wrote before for ShareThis?
The tabindex attribute you added will make the spans focusable by keyboard, but doesn't provide any support for Enter events. You will need to add listeners for Enter in JavaScript. Alternatively you could switch the spans to links or buttons - these have native keyboard support so won't need the additional JavaScript.
Please see attached screenshots. Is there a way to create a div that shows the HTML snippet exactly as it was inside the CKEditor window? In my app, certain users enter in text using CKEditor, which other users need to see in view-only mode. Some of the simple styling is preserved (e.g. italics, bold) but other important styling elemenets (e.g. highlighting, table borders) are lost.
I think that the easiest option will be to use CKEditor in the read-only mode.
The reason why I recommend using entire CKEditor is that you can take the HTML that's inside it, but you would also need to get the same stylesheets and that won't be easy.
I guess that you may want to display the read-only content as if it isn't placed in an editor. For that you could use the inline mode or an editor without toolbar, elementspath and resize plugins. In the second case remember to disable the ACF.
I am looking to have a toggle button that will write to a CSS file on the server and switch between visibility:hidden; and visibility:visible on a DIV named building1
I cannot use a style sheet switcher because there will be quite a few of these buttons and DIVS .....it needs to write to the style sheet so the changes will be visible to other users.
Thank You in advance!
I think that this link should help you out. It appends to the stylesheet. I definately think that jquery is the way to go.
Or you could go for this Q/A
If you want the changes to be visible to other users, you'll need to make a call-back to your server so the server can modify the css file.
Example (probably not top-notch, but it works): https://gist.github.com/canihavesomecoffee/4d99b82503e044baaa6d933a7910c82c. I'll have to warn you though, using this way can cause quite a lot of stress on your server if it's called a lot. In that case you'd probably want to select all different ones in one form and submit that once instead of a call for each button.
Can anyone explain why my input type="file" is greyed out in IE8 but not IE7. It's still usable, but you can't actually type in the box any more.
<INPUT id="fil1" type="file" size="44" name="fil1" runat="server">
IE7:
IE8:
<input type='file'> is treated as a special case input field in all browsers. It looks different in pretty much every browser, and it can't easily be styled using CSS.
The reason for this is that the browsers consider it to have security issues, for example, where users may upload files without realising it. They therefore enforce a standard look and feel for it, so that the field will always be recognised for what it is. They also prevent CSS and Javascript from having access to the field so that they cannot modify the how it looks or alter the value of it.
In the case of IE8, the browser developers have decided that the only way the user should be allowed to access the field is via the file selector button. This is a concious decision by the IE developers to increase security. There's nothing you can do about it.
For the sake of curiosity, you should try seeing how <input type='field'> is rendered in other browsers - Firefox, Safari, Chrome, Opera... you'll be surprised by how different they all are in how they render this. It's probably the single most inconsitently rendered element.
Because the textbox is readonly; which is the expected behaviour. You can select a file using the Browse button.
Typing is not an option, since the file is on the users pc and the webpage cannot directly access those files.
I'm using the jQuery UI Button widget to style all the buttons on my pages, but the button on a 'file' type input remains elusive. How do I style this button in general, and can I somehow apply the Button widget to it?
Here is a write up about styling the "browse" button (and problems therein) http://www.cs.tut.fi/~jkorpela/forms/file.html#present
File input elements are notoriously difficult to style.
There's a workaround described on quirksmode - check it out. I find it horribly hacky but it seems to work.
If you need more styling possibilities, you may have to look at a Flash-based uploader like SWFUpload. They work in a different way however - Flash uploads the file data directly - so you may have to change the way your forms work.