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;
}
Related
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. */
}
Here's input type="search" in it's natural habitat:
<input type="search" value="asd" />
http://jsfiddle.net/u9c7p345/
It has an X icon/button on the right side which is visible when there is text entered in the field.
When using the PureCSS framework, the default browser styling is over-written, and the [X] button which removes the text entered is not there anymore.
http://jsfiddle.net/fonfv7sL/
Can you point me to the file or CSS line that removes this specific browser default so I can amend the code?
As i already said in question comments, this X is being added by your system. In order to have this functionality consistent across all browsers, the first step you need to perform is some actions to negate this wizardry, you need to "reset" your css. About these "X"'s:
To remove “X” from all search input fields in IE, simply add this to bottom of your css:
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
To remove “X” from search input field on Chrome Browser (and all it’s mutations), simply add this to bottom of your css:
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
The following CSS code should remove that clear button on all search fields on page:
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
source: http://geektnt.com/how-to-remove-x-from-search-input-field-on-chrome-and-ie.html
you may also wanna disable that glow shadow thingy around the input field when is selected with
input {outline:none;}
now, you have the same look across all systems. now you can build from here the stuff you want, like a "X" across all systems.
So to answer your questions:
Q:What does the PureCSS override that makes the button disappear?
A:Because it probably resets the css, like the way i described.
Q:How do I get it back while keeping the framework?
A:If you want this functionality, you need to create it from scratch so it works for all browsers. Try using a absolute positioned on right div with "X" background on every input when input gets focus.
(NOT) LATEST EDIT:
After your last comment, im answering your question:
Q:how to keep this for the browsers that support it and continue using PureCSS:
A: You need to edit the .css file of PureCSS, search for all "input" rules that look like the ones i showed you above, and remove them.
(hopefully :P ) LATEST EDIT:
Q:how to keep this without changing PureCSS because i am serving it from CDN i can't edit
A: you need to re-apply the default values for the CSS that was reseted. See the default values here how can I revert webkit-appearance for input[type="search"] of normalize.css
Be careful, they must be declared AFTER the PureCSS, so you may wanna have them inline after the PureCSS or an external css file after the PureCSS.
I have a drop down box on a web page, using the HTML5 <select> tag. There are times where I want to make it "read only", that is display it as text only. For example:
Sometimes I want it to be "read/write":
And other times I want it to be "read only":
I would prefer not to use the "disable" attribute. I think it looks tacky, and implies that there is somehow a choice to the user when none is available.
Is it possible to transform the look of the current option for a select into normal text using CSS?
Yes, use the CSS:
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
/* needed for Firefox: */
overflow:hidden;
width: 120%;
}
example:
http://jsfiddle.net/eG3dS/
Because of the "needed for Firefox" section, you will need to make a div or span that constrains the select box size. It's too bad FF doesn't respect moz-appearance here.
Note that even though this makes it look like normal text, it is still a working select box! You will need to disable it some way, either by using the "disabled" attribute and changing the font color or otherwise.
In WebKit you can do it using -webkit-appearance: none;
select {
-webkit-appearance: none;
border: none;
}
Demo: http://jsfiddle.net/ThiefMaster/56Eu2/2/
To prevent the user from actually using the selectbox you need to disable it (disabled attribute).
Be warned that this is highly non-standard and does not work with -moz-appearance for example! Thebehavior of the -*-appearance property differs in various browsers and Mozilla even recommends not using it on websites at all:
Do not use this property on Web sites: not only is it non-standard, but its behavior change from one browser to another. Even the keyword none has not the same behavior on each form element on different browsers, and some doesn't support it at all.
I think the easiest thing would be to have a span next to your select, and use an event listener on the select to copy its text into the span, and toggle whether the select or the span is visible. It's a bit of Javascript but it will give you a lot of control.
You could create a custom drop down and have a disabled state, styled with CSS.
There is a really good jQuery plugin that you can set this up with: http://uniformjs.com/
I have a site which is primarily for mobile users but desktop too.
On Mobile Safari, using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.
In Chrome and Safari however, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6-digit number anyway.
Is it possible to disable this with -webkit-appearance or some other CSS trick? I have tried without much luck.
I discovered that there is a second portion of the answer to this.
The first portion helped me, but I still had a space to the right of my type=number input. I had zeroed out the margin on the input, but apparently I had to zero out the margin on the spinner as well.
This fixed it:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
The below css works for both Chrome and Firefox
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
Not sure if this is the best way to do it, but this makes the spinners disappear on Chrome 8.0.552.5 dev:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
It seems impossible to prevent spinners from appearing in Opera. As a temporary workaround, you can make room for the spinners.
As far as I can tell, the following CSS adds just enough padding, only in Opera:
noindex:-o-prefocus,
input[type=number] {
padding-right: 1.2em;
}
Another solution to avoid the browser default spinner for the number type by changing
type into text
inputmode into numeric and
number only pattern "[0-9]*"
<input type="text" inputmode="numeric" pattern="[0-9]*" />
Unlike 'number' type, the above solution still allows the user to enter non-number characters in the input box but you can avoid invalid submission by listening to the oninvalid event.
You can also hide spinner with following trick :
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity:0;
pointer-events:none;
}
I've got a table that has some <input type="text"> boxes in it, and I want these to show as normal text when printing. I have set up a media="print" stylesheet with
input
{
border-style: none;
}
in it, and this removes the border so the content just looks like text, but the input is still pushing the width of the column to its actual width (not surprisingly) so I get unnecessary empty space and column widths. Is there a funky way to somehow either set the input's width to its content size using CSS, or some other way to fix this?
Someone on another forums suggested using a print button which creates client side scripting to physically change the page markup, but unfortunately that's not really practical due to the complexity and dynamic nature of the page.
I'm pretty sure this can't be done, but I thought I'd ask.
Nope, I don't think this can be done without some scripting. But the scripting would be really easy to achieve with a Framework like Jquery:
For each input element, you would create a <span> next to it and give it a class that is hidden in the media="screen" stylesheet, and visible in media="print".
The input element itself would get a class that works the other way round, visible in screen and hidden in print.
Each input element would get a change event that updates the neighboring span.
I don't have the JQuery routine yet to pull this out of my sleeve, and not the time to put it together right now, but it is definitely solvable and still quite unobtrusive - no need to execute any scripting when the user starts printing.
I bet if you re-tag the question or ask a new one, one of our resident JQuery gurus will take a look at it :)
If you are using Bootstrap:
#media print {
.no-print {
display: none !important;
}
.form-control
{
border: 0;
padding:0;
overflow:visible;
}
}
I came across this searching for information on how to style my forms and a few other things.
After messing with some CSS I figured out a CSS only method that works for me.
My forms all have styling that involved color background and a border that is black.
In my print CSS file I copied my form css and changed all of the colors (not the text itself) to white. In other words it hides my text box and displays only the text.
Original CSS - #form textarea, #form input, #form select{ border:1px solid #ddd; color:#313131; }
Print CSS - #form textarea, #form input, #form select{ border:1px solid #fff; color:#fff; }
Works like a charm =>
Hope this Helps
input { border-style: none; display: inline}
I'm using ASP.NET and had the same issue.
I solved it by adding a Label that corresponds to my Textbox, and had two classes set up:
In #media screen:
.hdnPrint {visibility:visible;display:block;}
.visPrint {visibility:hidden;display:none;}
In #media print:
.hdnPrint {visibility:hidden;display:none;}
.visPrint {visibility:visible;display:block;}
For the textbox, I assigned the hdnPrint class, and on the label, I assigned the visPrint class. When the user prints the form, the label is displayed and the form field is hidden.
I assume you can do something similar in a non-ASP.NET environment by following the same pattern.
No scripting required.
To define the width of the input fields in the CSS print section, use:
width: ?cm
for the corresponding input elements.
Tested in Firefox; maybe it wasn't working in previous versions of the browser.
For bootstrap this works for me.
It is based on user5712635s answer but I added the appearance properties to get rid of the down arrows on selection inputs.
#media print {
.form-control
{
border: 0;
padding:0;
overflow:visible;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}