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
Related
I'm trying to write a piece of code in my style.css to select the text "register" inside registration button in order to move it a bit higher inside the button.(see following screenshot)
I googled but didn't find a solution how to select such specific value inside a css class or css id.
Please see below. Be aware though that CSS needs to be changed when you change the value of the button. It might be better to define an additional class that will be assigned conditionally.
Check MDN for more information
input[value="register"] {
background-color: red;
color: white;
}
<input type="submit" value="register">
the following code doesn't change the color of that text :
.ihc-register-10 .iump-submit-form input[value="regsiter"] {
color:red;
}
also I don't know what is the correct for of writing
input type="submit" value="register"
in front of class name :
.ihc-register-10 .iump-submit-form
which one of the following is correct ?
.ihc-register-10 .iump-submit-form <input type="submit" value="register">
or
.ihc-register-10 .iump-submit-form input [type="submit"][value="register"]
I have the following style set for labels of a particular form:
#incidentForm label {
font-weight:bold;
width:40%;
vertical-align:top;
}
Which is exactly what I want for my full page form. But for the modal that allows one to update a single field from a report where someone would view the data results, I would like the label for the TEXTAREA ONLY to NOT be limited to the "width:40%". All other input types should keep the "width:40%".
I've been trying to wrap my brain around how to either do a :NOT exception to the existing label style, or somehow set a separate style based on the class of the modal. I.E.:
.updateModal label(that somehow identifies only textareas) {
width:100%;
}
Here is an example of the structure of the update modal itself:
<div id="Return" class="updateModal">
<div id="incidentForm">
<div class="[name of this incident form type]">
<form class="AjaxForm" action="https://blahblahblah" method="post">
<fieldset id="fs1">
<legend>Edit report field</legend>
<div class="field">
<label for="31">This is the label for this text area field:</label>
<textarea id="31" name="31"></textarea>
</div>
</fieldset>
<input value="Update record" type="submit">
</form>
</div>
</div>
</div>
Please note that the id for the textarea and, thus the label for it, are generated dynamically based on the id field of the database the form information is pulled from. All of the field information is stored in a db so I would not be able to generate a specific style definition based on the id of the specific textarea itself. Or at least not that I can think of.
Does anyone have any suggestions?
Thank you very much!
The selector should be like
label[for=xxx]
{
/* ...definitions here... */
}
For multiple, you can make your selector simpler and generalize for modern browsers:
label[for^="3"] {
color: red; //It will apply to all label that starts with "3"
}
Or Simply you can write:
label[for="31"],label[for="32"],label[for="and so on.."] {
color: red;
}
Or For General Label Simply write
label {
color: red; //It will affect to all the label in the page
}
With CSS, the subject of the selector is the last compound selector of the entire selector (https://www.w3.org/TR/selectors4/#subject). In CSS4, there is a new subject selector that will allow this. It looks like: label! + textarea. The ! means that the label selector is the subject of this selector.
Unfortunately, this is not yet implemented in any browsers (http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/). Given that, we only have the ability to look for descendants, children, and younger siblings.
If you have some ability to control your HTML, this gives us a possibility: if we flip the DOM order of the form element and label, then the label becomes the younger sibling of the textarea. This gives us the option of using the adjacent + selector. The visual ordering can be altered by using a reverse-column flexbox. Consider:
<div class="field">
<textarea id="f1">My textarea</textarea>
<label for="f1">My Label</label>
</div>
<div class="field">
<input type="text">
<label for="f1">My Label</label>
</div>
.field {
display: flex;
flex-direction: column-reverse;
margin: 1em;
}
textarea + label {
background: #faa;
}
Demo: https://codepen.io/honzie/pen/weMRam
To summarize: (1) Is it possible in CSS2.1/3? Not with the current HTML. (2) Is it possible with CSS4 (assuming browsers implement it and the spec doesn't change)? Yes, in the future.
Although I don't have any code to work with, if provide some I'll try to include it, it seems to me you should be able to add a CSS class to any label that is being used for a textarea. If backend code is using database info to decide on the element to use for a form field then you can use that logic to add the class, otherwise add it yourself when you write the HTML.
You can use the following to select and attribute of an element:
input[type="text"] {
background-color: yellow;
}
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 */
}