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
Related
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;
}
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 would like to change the color background in the text and input fields of a form, but when I do this it also affects the submit button! Could it be done in some other way that does not affect the button?
I have used this code:
input, textarea {
background-color: #d1d1d1;
}
input[type="text"], textarea {
background-color : #d1d1d1;
}
Edit: working example, http://jsfiddle.net/C5WxK/
The best solution is the attribute selector in CSS (input[type="text"]) as the others suggested.
But if you have to support Internet Explorer 6, you cannot use it (QuirksMode). Well, only if you have to and also are willing to support it.
In this case your only option seems to be to define classes on input elements.
<input type="text" class="input-box" ... />
<input type="submit" class="button" ... />
...
and target them with a class selector:
input.input-box, textarea { background: cyan; }
You want to restrict to input fields that are of type text so use the selector input[type=text] rather than input (which will apply to all input fields (e.g. those of type submit as well)).
you can simply use the button tag with type="submit"
<button type="submit">Submit</button>
besides solving your problem, now you can put HTML inside it(icons for example), rather than using the value attribute to set the text.
If you need to insert a normal button inside a form, use type="button" to prevent it submitiing the form
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 */
}
How to disable a textbox in CSS?
Currently we are having a textbox in our view which can be enabled/disabled depending on a property in the model.
We are having asp.net MVC view; depending on the value of the Model property we need to either render a textbox or readonly textbox.
we were thinking of doing this by applying CSS to the view control.
Has someone done this earlier?
you can disable via css:
pointer-events: none;
Doesn't work everywhere though.
CSS cannot disable the textbox, you can however turn off display or visibility.
display: none;
visibility: hidden;
Or you can also set the HTMLattribute:
disabled="disabled"
You can't disable anything with CSS, that's a functional-issue. CSS is meant for design-issues. You could give the impression of a textbox being disabled, by setting washed-out colors on it.
To actually disable the element, you should use the disabled boolean attribute:
<input type="text" name="lname" disabled />
Demo: http://jsfiddle.net/p6rja/
Or, if you like, you can set this via JavaScript:
document.forms['formName']['inputName'].disabled = true;
Demo: http://jsfiddle.net/655Su/
Keep in mind that disabled inputs won't pass their values through when you post data back to the server. If you want to hold the data, but disallow to directly edit it, you may be interested in setting it to readonly instead.
// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;
Demo: http://jsfiddle.net/655Su/1/
This doesn't change the UI of the element, so you would need to do that yourself:
input[readonly] {
background: #CCC;
color: #333;
border: 1px solid #666
}
You could also target any disabled element:
input[disabled] { /* styles */ }
You can't disable a textbox in CSS. Disabling it is not a presentational task, you will have to do this in the HTML markup using the disabled attribute.
You may be able to put something together by putting the textbox underneath an absolutely positioned transparent element with z-index... But that's just silly, plus you would need a second HTML element anyway.
You can, however, style disabled text boxes (if that's what you mean) in CSS using
input[disabled] { ... }
from IE7 upwards and in all other major browsers.
Going further on Pekka's answer, I had a style "style1" on some of my textboxes. You can create a "style1[disabled]" so you style only the disabled textboxes using "style1" style:
.style1[disabled] { ... }
Worked ok on IE8.
&tl;dr: No, you can't disable a textbox using CSS.
pointer-events: none works but on IE the CSS property only works with IE 11 or higher, so it doesn't work everywhere on every browser. Except for that you cannot disable a textbox using CSS.
However you could disable a textbox in HTML like this:
<input value="...." readonly />
But if the textbox is in a form and you want the value of the textbox to be not submitted, instead do this:
<input value="...." disabled />
So the difference between these two options for disabling a textbox is that disabled cannot allow you to submit the value of the input textbox but readonly does allow.
For more information on the difference between these two, see "What is the difference between disabled="disabled" and readonly="readonly".
Just try this.
<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>
This won't allow any characters to be entered inside the TextBox.
**just copy paste this code and run you can see the textbox disabled **
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>.container{float:left;width:200px;height:25px;position:relative;}
.container input{float:left;width:200px;height:25px;}
.overlay{display:block;width:208px;position:absolute;top:0px;left:0px;height:32px;}
</style>
</head>
<body>
<div class="container">
<input type="text" value="rvi.tom#gmail.com" />
<div class="overlay">
</div>
</div>
</body>
</html>
Another way is by making it readonly:
<input type="text" id="txtDis" readonly />