Strange one,
im trying to apply a style to a textbox that is already using jquery autocomplete, the style im trying to apply doe not work, any ideas?
CSS
#LongTextbox {
width: 250px;
}
HTML
<input name="ItemEntry_item_${id}" type="text" value="${item}" id="ItemEntry_item_${id}" class="LongTextBox"/>
Debug shows
<input name="ItemEntry_item_1" type="text" value="" id="ItemEntry_item_1" class="LongTextBox ui-autocomplete-input" autocomplete="off">
CSS debug shows no sign of LongTextBox being consumed
Your HTML has a class of LongTextBox (capital B) whereas your CSS is targeting an id of LongTextbox (lowercase b).
change CSS to .LongTextBox instead of #LongTextbox
fiddle: http://jsfiddle.net/6Wgxc/
Change your CSS as below. In CSS class is denoted with . and id is denoted by #, further in your CSS code the class name LongTextBox is mentioned as LongTextbox
CSS
.LongTextBox {
width: 250px;
}
Related
Even if I don't really have hope, I want to style bootstrap input-group-addon in css only when the related input is focused. If the input is before the addon, like this:
<input class="form-control" type="email" placeholder="Enter email">
<div class="input-group-addon">#</div>
No problem, a simple :
input:focus + .input-group-addon {
background: $color;
color: white;
}
But assumed it can be placed after as well, if someone has a css based solution in this case, it would be wonderful.
You can't do that using pure CSS but using JQuery you can add these few simple lines to your code:
$( ".form-control" ).focus(function() {
$(this).prev('.input-group-addon').removeClass().addClass('input-group-addon-focus');
$(this).next('.input-group-addon').removeClass().addClass('input-group-addon-focus');
});
$( ".form-control" ).focusout(function() {
$(this).prev('.input-group-addon-focus').removeClass().addClass('input-group-addon');
$(this).next('.input-group-addon-focus').removeClass().addClass('input-group-addon');
});
If your "addon" not placed before or after Control EXACTLY, you can wrap control and addon in a wrapper and modify code using
.parent('.wrapperClass').children('.input-group-addon')
The complete code: JSFiddle Sample
I noticed this css on a web page and wondered how it worked!
What does this mean? input[class*="span"]
input[class*="span"], select[class*="span"], textarea[class*="span"] {
float: none;
margin-left: 0;
}
What it means it will select any input which has a class which includes the string "span" ANYWHERE in the class name. Such as:
<input class="span" type="text" value="span" />
<input class="span-3" type="text" value="span-3" />
<input class="span-six" type="text" value="span-six" />
<input class="myspan" type="text" value="myspan" />
Codepen EXample
'*' is an attribute wildcard selector. That CSS selector looks for any element of those types that has a class that contains 'span' in the class name.
From w3schools.com:
Example:
a[src*="w3schools"]
Selects every element whose src attribute value contains the substring "w3schools"
http://www.w3schools.com/cssref/css_selectors.asp
But in your example it looks kind of useless. Since the select probably has a class of "span", you could select it with:
input.span, select.span, textarea.span {
float: none;
margin-left: 0;
}
Then again, calling your class after an HTML element, isn't exactly smart..
Could you post the HTML to which it is referring?
With this kind of selector you are saying that if the provided string appears anywhere in the value, the CSS rule will be applied.
Here you have a more extended explanation: http://css-tricks.com/multiple-attribute-values/
Hope this helps.
input[class*="span"] has no differece usage with input.span. input[class*="span"] means that input tag that have class="span"
It basically means "Selects every element of type (like input fields) which contains class of span.
Take a look at: W3S Schools
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
I have an input button with a style, I want to alter the style if it is disabled. This works when disabled is set like so disabled="disabled" but if disabled is set simply by writing disabled it doesn't work with the class specifier as well, am I constructing the CSS wrong?
So to clarify input[disabled="disabled"].awesome works properly, input.awesome.disabled does not.
I am testing with the following HTML:
<input class="awesome" disabled />
<input class="awesome" disabled="disabled" />
CSS:
input[disabled="disabled"].awesome , input.awesome.disabled
{
color: #aaa;;
background-color: #eee;
}
If I write the selector like so, it works (but for all buttons)
input[disabled="disabled"], input.disabled { /**/ }
Disabled is not a class (which is what your CSS implies), it's a pseudoclass. Use this:
input.awesome:disabled
I would like to apply a special style to all inputs in my form that are required and empty at that.
It does work when i write in my css
input[required='required'] {
bla-bla-bla;
}
but it doesn't work, when i write
input[value=''] {
bla-bla-bla;
}
I know i can do that using jQuery, but i would like to do that in pure css, if it is possible.
Can that be done?
Thank you in advance,
Timofey.
If you don't have to support older IE versions, you can set the placeholder attribute on your input to something (can be whitespace, but must be something) and use :placeholder-shown to target that input.
<input type="text" class="custom-input" placeholder=" ">
.custom-input:placeholder-shown {
/* Your rules */
}
You can use the Pseudo-Selecot :invalid for this - it will match an input only when the browser-validation fails for the element. If you set the element required it will be invalid as long as it is empty.
And all moder browsers support this CSS-class: Browser Compatibility
input:invalid {
border-color: red;
}
<input type="text" required>
Searched css style empty inputs and found the following:
Matching an empty input box using CSS
You need to use JavaScript.
To use the CSS style, you would have to type in the attribute: value='' in your HTML, but then the CSS would match regardless of if the value changes mid-session.
Try this
<input type="text" value="">
input:not([value=""]) {
/* Your code */
}