The following does not work for IE11 for me:
input::-ms-clear, input::-ms-reveal {
display: none;
}
Side-issue, probably not relevant: Whether I have it in or not I get the same thing, which I'm guessing is the way this works: the first time you go into password field you get the show/hide icon, change fields, go back in and the icon disappears.
any ideas how to get rid of the reveal because I have to remove it?
thanks.
adding !important to the rule fixed it. Something, somewhere must have overridden this, but there are no other -ms* entries in the imported style sheets and html (however this is tricky as it uses the truly awful GWT which seems to obfuscate and hide everything)....
input[type=text]::-ms-clear {
color: red; /* This sets the cross color as red. */
}
Related
I thought:
.eventfuture
{
display: none !important;
}
Which is a very simple CSS class, ought to completely hide the text?
I apply the above to a paragraph class:
<p class="eventfuture">Text Here ABC</p>
What happens is that "Text Here ABC" is 100% hidden on the client side of the browser (good) but still present in the source code (bad).
Is this normal behaviour? I am sure it is not.
I don't want "Text Here ABC" to be indexed by search engines hence why I would like it completely hidden.
Any ideas what it is that I might be doing wrong?
Thanks
What you are asking is impossible by css. Both display: none; and visibility: hidden; will be shown in the source code.
However, if you want that part of your source code not to be indexed by google you can use:
<!--googleoff: index-->
<div>Something here</div>
<!--googleon: index>
But still some articles say this works and some say it doesn't.
I have been looking for a 100% solution for a long time. Some say using jquery .show() and .hide() can help as well.
IMPORTANT NOTE: Hiding text is not a good practice if you need SEO. Google bots don't like hidden texts such as display: none; because they think you are hiding keyword content.
I don't think any css would achieve what you're describing.
display: none
Just visually hides the element that it's styling.
If you want to remove the contents from the document you should use javascript and modify the text/innerhtml from there. An example would be:
document.getElementByClass("eventfuture")[0].innerHTML = "";
What display: none; does is not to hide the element from the DOM. It simply hides it from the user and search engines can still index it. Probably you should hide it from the server.
EDIT
To remove the element from the DOM entirely, this might be a fix:
var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);
Real code snippet
Check w3schools tutorial on display none
My site's menu is a list created by ul/li syntax. I have already deleted all CSS lines about the menu list but it still look like this, which the bulletin dots show up weirdly on the last character of the menu item text. I'm getting crazy to deal with this.
Why is this happening in IE/Google Chrome?
edit:
Thanks for your help. but after the reset, the list is not aligned vertically. It looks like this, and if i add list-style-type:none to the li element again, the dots just appear again.
You need to override the user agent styles. To remove the dot, override the list-style-type
ul {
list-style-type: none;
}
Use Reset.css to neutralize all cross-browser differences, however the problem you're describing in Chrome is probably; be caused by your -webkit-padding-start property.
Try to use a CSS Reset, it will override the default styles.
e.g. of reset is given at this page http://meyerweb.com/eric/tools/css/reset/
It's a useful feature, to be sure, but is there any way to disable it?
For instance, if the form is a single text field and already has a "clear" button beside it, it's superfluous to also have the X. In this situation, it would be better to remove it.
Can it be done, and if so, how?
Style the ::-ms-clear pseudo-element for the box:
.someinput::-ms-clear {
display: none;
}
I found it's better to set the width and height to 0px. Otherwise, IE10 ignores the padding defined on the field -- padding-right -- which was intended to keep the text from typing over the 'X' icon that I overlayed on the input field. I'm guessing that IE10 is internally applying the padding-right of the input to the ::--ms-clear pseudo element, and hiding the pseudo element does not restore the padding-right value to the input.
This worked better for me:
.someinput::-ms-clear {
width : 0;
height: 0;
}
I would apply this rule to all input fields of type text, so it doesn't need to be duplicated later:
input[type=text]::-ms-clear { display: none; }
One can even get less specific by using just:
::-ms-clear { display: none; }
I have used the later even before adding this answer, but thought that most people would prefer to be more specific than that. Both solutions work fine.
You should style for ::-ms-clear (http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx):
::-ms-clear {
display: none;
}
And you also style for ::-ms-reveal pseudo-element for password field:
::-ms-reveal {
display: none;
}
I think it's worth noting that all the style and CSS based solutions don't work when a page is running in compatibility mode. The compatibility mode renderer ignores the ::-ms-clear element, even though the browser shows the x.
If your page needs to run in compatibility mode, you may be stuck with the X showing.
In my case, I am working with some third party data bound controls, and our solution was to handle the "onchange" event and clear the backing store if the field is cleared with the x button.
To hide arrows and cross in a "time" input :
#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
-webkit-appearance: none;
margin: 0;
}
Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.
I'm trying to remove the blue "halo" outline that form elements have in Firefox on OS X. Using CSS, I can remove the halo in Safari on OS X, via:
input {
outline: none;
}
But this seems to have no effect in Firefox, nor does the -moz-outline property.
Another option, that takes care of all of the 'halo' is this:
*:focus {outline: none;}
I guess you could add an !important if you wished, but I haven't run into the need yet.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
I'm going out on a limb since I don't have OSX to test it... but does removing the border work?
input {
border: 0;
}
I believe the style of all the form elements are stored in the forms.css file. In OS X, I think it is located here:
/Applications/Firefox.app/Contents/MacOS/res/forms.css
You may want to browse through that file and see if there is any obvious CSS that is affecting the appearance you are seeing. For example, on Windows the input element has -moz-appearance: textfield;, which I couldn't find any documentation on, so perhaps there is some "native" -moz-* style on those fields that is controlling the glow, something you could possibly override.
The other thing to try might be to override everything in that file by changing the input definitions to input2 or something (after making a copy of course). Then you can see if you can get the glow to stop at all by manipulating the default CSS.
Once you've determined you can make it stop (if you can), you can add styles back in a bit at a time until you find the one that causes the effect you don't want. You can probably speed up that process by eliminating styles from your testing that obviously aren't related (e.g. - line-height: normal !important; is almost certainly not responsible for a blue glow around the fields).
Maybe you have an active user style sheet in your machine creating this behaviour. Some add-ons do this (to make the focus more obvious).
Look into the firefox's chome forder (in your user files)
Alternatively try with
input {outline: none!important;}
Also
The Stylish plugin has a style for this, maybe you have it installed?
There are greasemonkey script that do this. If you have it installed, disable it
They both take precedence over the !important attribute.
So: you have several places to look into
* User stylesheets
* Stylysh
* greasemonkey
* anothes add-on
One of those must be forcing the outline
I went through the various suggestions made here, but none seemed to be able to fully address the problem. By defining a custom border style, i.e.
border: 1px solid #000;
I'm able to get rid of the focus halo, but this obviously alters the look of the input element. border-style: inset; seems to most closely resemble the "native" look, but it's still not quite right, so as far as I can tell right now, you can either suppress the halo, or have a natural looking input.
I believe this is what you are looking for:
input:focus { outline: none; }