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/
Related
Using contact forms 7 on my Wordpress site development and I noticed the buttons were different for mobile devices, so after searching I found the solution of -webkit-appearance: none; which I applied to the element input.wpcf7-form-control.wpcf7-submit.
The style has been applied because it shows up when I inspect the element, but nothing has changed on mobile devices.
Should I have applied it to a different element?
You should try this code instead :
input.wpcf7-form-control.wpcf7-submit {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Consider adding !important if it still not working.
sorry for the super late answer.
The class seems to be correct indeed.
Temani's answer is also a good suggestion for wider browser compatibility.
However, sometimes, even being supported by browser like Safari, the use of the prefixed -webkit- has no effect.
So, I'm going to give you two answers:
For the case of a submit input -your case-, you can simply give the background and border properties you want and that will overwrite the browsers default css properties. No need of the appearance property. But you will probably need to define each status of the button including :active and :hover
For Check boxes and radio buttons a workaround to the problem is hiding the input with visibility: hidden and using :before and/or :after to create an alternative check or radio which will also need a visibility: visible property. You can use the :checked:before selector to apply different appearances to each status
Note: remember :before and :after associated to an input will only work in Chrome and Safari and only together with the property appearance: none
Hope this helps
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;
}
Context
Firefox 14 (and 13); specific CSS styles being ignored under certain conditions
The Problem
Using the following CSS:
*
{
outline:none;
-moz-outline:none;
-moz-user-focus:ignore;
}
JSFiddle
Firefox 14 (and 13) ignore these styles when using Tab to switch between select elements. Clicking these elements after using Tab still displays the outline.
Notes
Specifically styling select instead of * has no effect.
This only occurs with select elements.
The Question
Is this a bug or intended behavior?
Are there any other CSS styles that need to be used to prevent the outline from appearing indefinitely?
This is a known bug which has sparked several Stackoverflow discussions. From what I have read, Mozilla have deemed that CSS is the wrong place to handle this element behaviour, and have opted instead to handle it by other means. At this time the only solution is to either use tabindex="-1" or to set the element to display as something else, and restyle the look and feel of a droplist — but be warned, this opens a can of worms in itself.
If you do opt to do this, I have had success in the past with the following kludge:
select {
appearance: normal;
-webkit-appearance: none;
-moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}
Appearance tells the browser to display the element as something else, but this is inconsistent from vendor to vendor. appearance: normal; is the spec, whilst webkit replaces normal with none. -moz-appearance: radio-container; has been the only way I have found to display the text within the chosen select option, whilst removing the arrow chrome for a fully customised droplist. However, try experimenting with the available options until you find something that works and doesn't add the focus ring you wish to customise. Internet Explorer will require further kludge to bend the select to your needs. Entirely possible, but out of scope for this question and answer.
So far the only way I've found to overcome it is to set the tabindex='-1' (see fiddle) which, of course, takes the element completely out of the tab selection chain. That would not be good for user interface, and my guess is not exactly what you desire (I assume you want to keep tab accessibility but just do your own styling for highlighting).
Another solution is to set outline: none and set a box-shadow. For example:
.my_elements:focus
{
outline: none;
box-shadow: 0 0 3px 0px red;
}
Use
*:-moz-focusring {
outline: 2px solid blue;
}
will give you similiar to chrome
Also, if using mac, you also need to enable this:
How to allow keyboard focus of links in Firefox?
On a website I'm making I've styled the input controls to make them look a little more pleasant - including use of:
border-radius: 15px 15px;
to make the controls have more rounded corners.
This works great, but the problem is that when the user selects the control in question, a selection style seems to appear around the outside of it to show its the active control. This selection style/border doesn't seem to follow the border-radius set up for the control in general. I'm guessing this is kind of like a link:hover situation, but I'm not sure what to do about it.
How do I handle the style of a control when it's selected specifically?
textarea:focus, input:focus{
outline: none;
}
Indeed there is, it's the :focus pseudo selector: http://jsfiddle.net/ahmednuaman/SMfQg/
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;
}
}