Is it possible to set CSS for disabled textboxes? I don't want the automatic gray-out in Firefox/Chrome.
The reason is that I'm sometimes disabling textboxes right before submitting a form so they don't get unnecessarily transmitted (and clutter the URL), and that gray-out behavior is degrading the user experience by creating flicker.
Help?
You should be able to style the text box by defining a class with how you want it to look, and then adding the class when you disable the input. If you're not worried about IE6 compatibility, then try using attribute selectors:
input[disabled="disabled"] {
/* your CSS style */
}
You should be able to use any styles you'd use on any other element.
Related
We embed React components in our website. There are some basic styles which apply to our buttons, which come from the user agent (such as outline on focus) and from the HTML/CSS environment where we embed our React components.
We want our React components to be style independent. Since we also use our components in widgets, we can't really control the external environment.
One solution is for our basic Button element to render <div role="button" ... instead of an actual button element.
Is there any reason to avoid this practice, such as browser support, functionality, etc.?
Don't do this. Don't. It's accessibility hell. <button>s are interactive. <div>s are not. This is worst practice.
As you commented, focus is not available either on a <div role="button" ...>, which is quite nicely baked into a <button>.
while, i'm not sure but maybe we can control it using unique/different class name
Try using this (you can add it to your reset.css):
*:focus { outline-width: 0px !important; }
This should completely eliminate any visible outline, despite element's class name (or if it doesn't have a class name).
If at some point you'll need outline back, you can add it directly to your custom class.
I inserted a button in header of page and I want change padding and margin of another element when a user clicks on this button. I used this code but didn't work:
a:clicked
{
#header
{
padding:0 40px 0 40px !important;
}
}
In css docs, programmers use # symbol at begin of their code. Can I use that? How?
CSS has no mechanism for giving your styles "state." It's difficult to make decisions in CSS based on "The user clicked a button," etc.
Difficult, but not impossible. One thing you could do is change the button to a checkbox and use the :checked selector. Another option is to hide the checkbox and make the button a label for it; this is known as the CSS checkbox hack.
The usual way, though, is to use Javascript to add/remove a class from an element when a button is clicked, then style based on the existence of that class. This is probably more maintainable since it doesn't require hacks to your HTML. Note that it won't work for users who have blocked Javascript.
I have a piece of HTML that I need to modify and I need to keep the changes minimal (out of CSS). All I need to do is to hide a table cell until something happens. So I went ahead and added the style tag as shown below:
<td style="display:none;">
However, this causes the style class to reset, e.g. the cell which used to be vertically center-aligned is now top-aligned, and so on. My understanding is that this is because the style attribute overrides the default CSS stuff. Is that correct? If yes, how can I prevent it? I just need to add the display attribute, not reset the rest of style attributes.
I spend some time searching online and noticed that HTML5 has introduced something called scoped style. Is there an HTML4 easy-to-do equivalent for it?
It might be because doing display:none remove the node from the DOM display calculation. You no longer have a placeholder for that cell in your table. You might try visibility:hidden, which will have the DOM element keep its place in the document rendering but just not be visible.
Try visibility:hidden; instead of display:none;
Let me know if that does the trick.
I need to style all the input fields but one.
So i have set a rule for all the inputs on the site.
For the seachfield i need to use the browser default, so i was thinking i could just inherit all the values i have set for the general input fields. (have tried border: none to)
This does not work in FF nor Safari :( The border just gets transparent.
http://jsfiddle.net/N5KKH/1/
Any idea how i could get the default browser styling back?
EDIT: i need the first input field look like the second one:
http://jsfiddle.net/N5KKH/2/
You should be using a class on all inputs you want styled rather than a general selector on tag name.
If you cannot control this, you could try to set the input back to the default css properties which are listed here although this is not a nice solution and will probably not actually result in the default appearance of the input box.
CSS3 has the not pseudo class which could be used to select all the other inputs although this is not supported by all browsers. JS abstraction frameworks such as jQuery often allow you to use "not" selector syntax cross-browser although this is much less elegant than a pure html css solution.
EDIT
Actually, it doesn't seem to. Just gives me a solid border. Hold on, seeing what I can play with.
EDITv2
It appears that in CSS3 it can be done using the not pseudo-class. However, there doesn't appear to be a way to bring it back from a styled form element. That being said, try just adding a class to input fields you would like changed, then have it ignore the one you don't want changed.
Alternatively, you could use something like jQuery to select only the elements you'd like styled and apply the class to it or manually add the properties (but now you're adding a JS-dependance).
I'm not sure if you generate them from codebehind or hardcode them into the website, but I'd recommend that you use either a class or a name attribute on the input fields you want to look different, like this: http://jsfiddle.net/VeXgw/
I don't believe there is a simple way to unset styles because technically there is no default set style. I think your only chance would be to write some browser specific style rules with javascript to try to make it look like the defaults for each browser.
The better method may be to give all of your inputs (except the searchfield input) a class that you use to style them instead of styling ALL input tags.
Can you use an ID or Class for that single link?
Update:
Try using
border-style:inset;
should do the trick...
http://jsfiddle.net/N5KKH/10/
My understanding about CSS is that, generally if you set <div style="color: Red">, all content inside <div> will be affected. However if you put a html button inside, the color on the words on the button is not affected. I'm a bit disturbed by this exception. How do I give a reasonable explanation to it?
It's about users' expectations of the user interface.
Buttons (and other user interface widgets) prefer to look like their operating system counterparts. On Windows, users expect buttons to be grey with black text, so that's how browsers present them. It's intentional that you have to try quite hard to override that behaviour.
It's because it would be impractical for input elements to inherit style information from parent elements, this means whenever you style a form, you would have to create style rules for every type of input used in it, to make sure they don't turn out unexpected. you can however force inputs to inherit their parent's style with css:
input {
color: inherit;
}
That code will cause all input elements to inherit their parent's text color style.
The "cascading" part of "Cascading Style Sheets" (CSS) means that in general, you're right: a property set on an object will cascade down to objects below it.
However for some properties this doesn't make sense, so those properties are explicitly non-cascading (eg if you set a border on a div, you don't want all its children to have borders as well).
If we were dealing with raw XML in our DOM, that's where it would end. The colour would indeed cascade all the way down. However, we're dealing with HTML, and HTML has some pre-existing conditions, exceptions and overrides. For example, a <div> always defaults to display:block; whereas a <span> will default to display:inline;.
Buttons and input fields have a lot of defaults and overrides, which is why they show up as buttons and input fields without you having to do loads of styling on them. This is also why they override the cascading effect of certain CSS rules, including color.
You can override the override by specifying inherit for the overridden styles. So if you want you button to take the red colour you specified previously, you would do something like this:
.mybutton {
color:inherit;
}
You will want to look up the rules for inheritance in CSS; certain property values will cascade to certain descendant elements, and certain ones won't. In fact, one of the possible values for many CSS properties is inherit, which suggests that this value is not always the default.
The browser itself has default styles for input types, dependent on the OS it's running on. So for Windows, it will most likely be grey, for Apple OS' blue and round (fancy).
There are very easy ways to override this in CSS, I use it all the time in my websites, customising buttons and input fields to better match my site design with images and as mentioned before color values either inherited or changed.
Here is a nice article explaining the cascade and inheritance rules native to using CSS that might help you out.
:)
Buttons and some elements else come with their own style. This style is browser dependent. In different browsers the buttons can look a bit different.