I have a text input:
<input id="csv-filename" type="text" name="csv-filename" placeholder="Select a CSV file">
I have placed a label above it for a different control:
<label id="trial-csv-label" for="trial-csv">Select a CSV file</label>
Both the input and the label have identical width, height, and positioning, and the label has a higher z-index and no opacity. This is a workaround for an IE bug, which is the only reason I've created such a monstrosity.
The problem I am having is that, in IE only, a click on any part of the label which does not have text clicks through to the underlying input. (Or possibly another way of putting this is that the width of the label does not seem to stretch the full width of the input, but if you give the label a bit of opacity and an outline you see that's not really the case and you can still click through on the non-text parts of the label.) This should not be happening.
I have attempted to stop propagation, but that is not working, and I don't believe this is a propagation issue anyway.
Any ideas?
I have found this to be an IE issue that can be solved using a transparent image as the background, sometimes happens on links too.
note that I have also found that IE sometimes doesn't like the usual 1x1 transparent gif - if this happens then make it 50x50 and it should work
Related
I'm writing an advanced filter tool, and I'd like to have live syntax highlighting for the query field, which is a standard <input type="text">. I am doing this by listening for changes, parsing the query, and displaying a highlighted version at the same visual location as the text. I would like to display the highlighted text behind the <input> for simplicity. Then, all I need to do is make the text in the <input> invisible. However, the obvious ways of doing this (color: transparent or opacity: 0) also hide the insertion point. I tried fiddling around with text-stroke and text-shadow, but to no avail. How can I hide the actual text without moving it or hiding the insertion point?
The solution I ended up with was positioning the styled text visually above the unstyled text, then setting a text-stroke on the unstyled text to shrink it just a bit.
I spent such a long time trying to figure this out and I can not find anything on google about it but how do you hide or remove the value label that lies under the input type="range" (slide bar) element that shows the current value of the slide bar.
If you don't know what I am talking about since I understand that this label does not always show up with the html slide bar but in chrome (Version 54.0.2840.98) and safari (Version 10.0.1) at least it always shows up in my case. For example, this SINGLE line:
<input type="range" min="0" max="100">
always outputs:
That number under the slide bar is what I want to get rid of! Please help I'm hopeless!
Here is a website with a very good explanation for you how to hide it as well as customize if necessary!
http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
I did not entirely figure out why this label appears and how you exactly get rid of it; HOWEVER, this label inherits its style from its parent element (in my case a div element) so all you have to do is to set the parent element's color to color: transparent; and done, no more pesky label.
I hope this helps someone!
EDIT:
Actually it turns out for some reason a <span> element was automatically being created with the slide bar that displays its value so you could also loop through the the parents elements and remove it from the doc there if you choose so.
Similar to Bing.com's search box, I wanted to make a text box where it looked like there was an image in the text box (i.e. magnifying glass for search engines). Realizing that this is not possible, I decided to make the textbox invisible using CSS, and simply making a blank border around the two. The problem with this approach is that when someone clicks the textbox, an outline of it appears anyway, making hiding it redundant.
How can I make it so that when clicked, the text-box will now show any outline of itself?
I think there are different ways for different browsers.
What i tested so far and it works is with chrome.
html:
<input class="noOutline" type="text" />
css:
.noOutline {
outline:none;
}
In Firefox extra spacing is added around the text value (not just vertical space as would be the case from line-height, but horizontal as well).
Chrome, Opera (has a slightly different line-height issue), and even IE all render submit buttons without adding any extra space.
http://jsfiddle.net/jswartwood/aFCwj/
If you open firebug and hover over the <a> and <input> respectively, you can see that it is not padding, etc.
From the sound of the bug tracker it seems that Firefox puts a "block" inside these form elements?!?! If this is true, why? This makes visual button size very difficult to keep consistent.
After digging through the Firefox source code (layout/style/forms.css) I found ::-moz-focus-inner to be the shadow selector I needed.
I still disagree with mozilla's choice of forcing line-height, but that is another story; in the mean time I may be able to normalize all browsers by setting line-height: normal.
input::-moz-focus-inner {
padding: 0;
border: 0;
}
A working example: http://jsfiddle.net/jswartwood/aFCwj/14/
To answer your original question: I do not believe CSS can successfully style the input submit element perfectly consistent across all browsers.
Every browser renders these elements differently. Explorer's buttons are in keeping with Windows. Safari's buttons are in keeping with Mac styling. Firefox, Chrome, Opera, etc. are going to do their own thing.
When it's important enough for your design that the submit button look the same across all browsers, you would create a custom graphic and make that your button.
Simply replace your submit button code with the following...
<input type="image" src="myButtonImage.jpg" alt="" />
You can optionally use CSS Sprites or JavaScript to swap button images on hover, click, etc.
A button doesn't have to be a button. You can use any other element, like a in your example, or even better span. And bind it click event to submit your form.
I've found a very strange thing.
I was complaining about it before, but nobody sees old questions here.
Here's an example.
It works perfectly in Opera only... In Firefox, Chorme, Safari and IE8 there's a border around this button... And I have no idea WHY? How to delete the border?
Thanks.
Thats because you have set a type of image and not defined an image url... you have set the background image using CSS.
Change your element to a span or such and this will fix the issue, also add cursor to be a pointer in css too, this will give the user the idea to click it.
then use an onclick event for the submit.
As others have noted, you have defined an "image"-style button but not provided a source URL, resulting in a broken image.
The simplest solution is to change type="image" to type="button", which removes the broken image icon and border.