I'm stuck on this even though it is very simple.
I'm have a custom css file. In this I have added this piece of code:
input[type=text] {
margin-top:5px;
width:370px;
}
I have one page where I want to override this but when I try to with the following, the width of the text input does not change.
input[type=text] {
width:100px !important;
}
Try <input type=text style="width:100px;" /> That seems to work for me when using bootstrap .
You should be using CSS classes here, not to mention its better practise to use percentages rather than finite pixel values.
In any case, avoid inline CSS because thats bad practice.
CSS:
#narrow_input {
width:100px;
}
html:
<input type=text class="narrow_input" />
That way when you decide to make the narrow input red as well, you can just add color:red; to the stylesheet.
Related
Is there a way to mark a CSS rule as less important, such that it doesn't override a subsequent rule even if the first rule has higher specifically? For example, say I have the following in my CSS file:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
The idea I was going for is that all text input fields that are children of the div "inputDiv" get a width of 125px, except for certain specific inputs that get some other width. The problem is that the first declaration overrides the specific item declarations.
I've tried the following:
Append !important to each of the specific widths. Works, but many claim (rightly, I think) that !important should be avoided, and it is rather cumbersome as it must be added to each element with a specific width.
Prepend #inputDiv to each of the specific selectors, i.e. #inputDiv #differentInput1 Again, works, and avoids the issues with using !important, but still cumbersome as it has to be done to each element.
Is there any way to simply say that the items in the first declaration are less important, and shouldn't override anything?
There's no way to do this since it's antithetical to CSS in the same way that !important is -- doing the opposite would be just as abusive. Your only option is to rely on selector specificity. You can write this in a way that is not as cumbersome by using a class for inputDiv instead of an ID, for example.
maybe a way to solve you problem or answer your question you could try something like this
(http://jsfiddle.net/6aAF5/)
<div class="inputDiv big"> BIG</div>
<div class="inputDiv middle"> MIDDLE</div>
<div class="inputDiv small"> small</div>
<p>
<div class="inputDiv"> normal</div>
</p>
<style type="text/css">
.inputDiv {
background-color:green;
width:200px;
height:20px;
}
.inputDiv.big {
background-color:red;
width:400px;
}
.inputDiv.middle {
background-color:lime;
width:100px;
}
.inputDiv.small {
background-color:orange;
width:50px;
}
</style>
and little explanation about the !important
!important in a css file is used to override styles which are defind directly in the html.
this means if you have
<div class="isItImportant" style="background-color:red;width:100px;height:100px;"></div>
<style type="text/css">
/* this changes the styling */
.isItImportant {
background-color:green !important;
}
/* this doesn't change anything */
.isItImportant {
background-color:fuchsia;
}
</style>
(http://jsfiddle.net/6aAF5/2/)
You can avoid these issues by being smarter about your selectors, as others have noted. As a best practice, avoid IDs whenever possible, and try to use just one or two selectors for any given set of styling.
For example, rather than:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
You might try doing this:
input[type="text"]{
width:125px;
}
.differentInput1{
width:25px;
}
.differentInput2{
width:500px;
}
If you need more specificity than that, something like this would also work:
.inputDiv input[type="text"]{
width:125px;
}
.inputDiv .differentInput1{
width:25px;
}
.inputDiv .differentInput2{
width:500px;
}
Ultimately though, you want consistent styling throughout your site, so you shouldn't need to get so granular. You might want to look into OOCSS, which was great in helping me write lighter-weight, more scalable CSS.
http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
http://oocss.org/
Well, there are some ways to achieve what you want to (if you don't want to do a lot of change),
Change your div id="inputDiv" to a class name class="inputDiv", and change your css selector to .inputDiv. This way your 1st declaration won't override your proceeding declarations.
Use LESS or SASS, which allow you to namespace css rules.
And lastly, You can override the (unwanted) styles using jQuery, but it's an unnecessary overhead.
PS: Being descriptive in CSS is rather helpful although it's cumbersome.
I have an annoying IE6 layout bug
This screenshot shows the problem:
Problem: Text inputs i.e. <input type='text' /> are wrong size.
The text inputs are a bit wonky. They are supposed to be 248px wide (like the textarea) and on the same horizontal level as their labels. All other browsers appear to obey the following code but our friend IE6 doesn't
.simple_form input[type='text'],.simple_form input[type='email'],.simple_form textarea
{
width:240px;
border:1px solid #ccc;
padding:3px
}
I dunno what I'm doing wrong here and it's driving me nuts. The page in question is here. The inputs are significantly wider than 248px in IE6. Does IE6 have a problem understanding input[type='text'] when used in CSS?
Can post more code
IE6 doesn't support the attribute selector in CSS.
You will to select those elements using an IE6 compatible way, such as classes.
In addition to the previous answers, also remember to keep said css selector in a separate selector. So for example,
input[type="text"], input.text {
color: red;
}
This will be completely ignored by IE6. But...
input[type="text"] {
color: red;
}
input.text {
color: red;
}
should work.
IE6 does not support CSS attribute selectors. Try a selector like the following instead:
.simple_form input.text {
...
}
In addition, remember the differences in the box model for IE6.
Yes our red headed step child, in my experience does not resolve well with attributes. Instead do something like
.input {/*your styles*/}
Not only will it be browser adaptable but with a css reset you will find it browser persistent as well.
If you check the form at this link, you'll see that required fields have a class="required" in the CSS and a * in the markup.
http://drupal.org/user
Can the * which shows in the markup be added entirely with CSS for divs that have this class?
You can use the after pseudo class:
.required:after { content: "*"; }
or, because you explicitly asked for a div with that class:
div.required:after { content: "*"; }
Should work (for IE only since IE8)
You can apply any style to this, of course. You can even do things like this:
div.required:after:hover { /* Hello, I'm a geek. */ }
This can also be achieved with JavaScript. jQuery:
$(".required").append("*");
span:after { content:"*"; }
Demo: http://jsfiddle.net/W3gHU/
You can use the :after or before css pseudo element for this, more info, also abt which browsers support it here.
You could add an image of a star via CSS. This should work in all browsers.
.required
{
background-image:url(/path/to/your/images/dir/required-field.png);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
}
Try this page:
<html>
<style>
.required:after {
color: red;
content: "*"
}
</style>
<body>
<div class="required">Name</div> <input type="text">
<div class="required">Email</div> <input type="text">
</body>
</html>
:after is understood by probably everything except for IE (hopefully IE9 will have support)
Update taking into account comment of Šime Vidas:
it was just example of using. Of course it would bring more sense if we make it this way:
.required:before {
color: red;
content: "*"
}
....
<div>Name <input type="text" class="required"> </div>
then we can even add unobtrusive javascript validation to that field (so this way brings good advantages). The problem is that this refactored page will be displayed as we want it only in Opera (I checked it on all last builds of browsers, except for FireFox 4, but I'm not sure FF will change the way they take that style into account).
:after and :before do not work for input and img elements; there is related discussion of why. $(".required").before("*") from jQuery however will work everywhere, but that's more about JavaScript then CSS (and was mentioned before by other people).
I am trying to style some form labels by selecting them with their 'for' attribute. But nothing is being picked up when I preview it in IE7. I'm doing this because I'd like to style them differently to each other, without adding to the existing markup.
So if my css looks like the following, I get nothing:
<style>
label[for="foo"] {
background: blue;
padding: 1em
}
</style>
<form>
<label for="foo"/>bar</label>
<input name="foo" type="text"/>
</form>
But if I change it to this, the styling works.
<style>
label[fro="foo"] {
background: blue;
padding: 1em
}
</style>
<form>
<label fro="foo"/>bar</label>
<input name="foo" type="text"/>
</form>
Have you seen this kind of problem before? Is there a problem with the way I'm writing the CSS, IE7, or something else?
This user seems to have had the same problem you are having:
here
He says that because "for" is a reserved word, it can't be used as a property name. But 'htmlFor' is the DOM property name associated with the for attribute
Labels are paired with specific input fields, so is there any reason why you cannot use class instead of creating a multitude of selectors in your CSS for this purpose?
Is there some kind of "not" CSS selector?
For example when I write the following line in my CSS, all input fields inside an tag with class classname will have a red background.
.classname input {
background: red;
}
How do I select all input fields that are OUTSIDE of a tag with class classname?
With current browser CSS support, you can't.
Newer browsers now support it- see Sam's answer for more info.
(See other answers for the alternatives in CSS.)
If doing it in JavaScript/jQuery is acceptable, you can do:
$j(':not(.classname)>input').css({background:'red'});
Mozilla supports negation pseudo-class:
:not(.classname) input {background: red;}
See also: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
Note that the negation pseudo class is in the Selectors Level 3 Recommendation and works in recent versions of Firefox, Chrome and Safari (at least). Sample code below.
<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
div {
border: 1px solid green;
height: 10px;
}
div:not(#foo) {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
<div id="foobar"></div>
</body>
</html>
Wouldn't you do that by setting the 'global' background to red, then using the classname to alter the others?
input { background: red; }
.classname input { background: white; }
I would do this
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
There is no way to select the parent of matched elements with CSS. You would have to use JavaScript to select them.
From your question I assume you have markup that looks more or less like this:
<form class="formclassname">
<div class="classname">
<input /> <!-- Your rule matches this -->
<input /> <!-- Your rule matches this -->
</div>
<input /> <!-- You want to select this? -->
<input /> <!-- You want to select this? -->
</form>
One option is to add a class to a higher element, say the <form>, and write a rule to style all of the inputs of the form. I.E:
.formclassname input {
/* Some properties here... */
}
Or
.formclassname > input {
/* Some properties here... */
}
If you want to select them based on the fact that they are not inside of an element with a specific class, you're out of luck without the use of JavaScript.
I think the closest you can get is to only affect direct descendants with a declaration
This code for example will only affect input fields directly under divs with class "maincontent"
div.maincontent > input {
// do something
}
Inputs are a bit annoying because, unlike most other html elements, there isn't necessarily a way of resetting all the css properties back to their default value.
If the styling is non-critical (ie a nice to have but doesn't affect functionality) I would use jQuery to get an array of all the inputs, check their parents, and then only carry out the styling on those outside that div. Something like:
$('input').each(function() {
if($(this).closest('.classname') == false)
{
// apply css styles
}
});
(By the way, I'm no jQuery expert, so there might be some errors in the above, but in principle something like this should work)