I have two forms on my site but am struggling to style them differently.
I want all text areas/inputs on the website to have the same style except for one form.
So all forms on the site use this css...
input, textarea {
background-color:#eae7e7 !important;
}
How do I go about changing the background color on another form as per below?
<div class="form-group">
<input type="email" class="form-control input-sm" id="name" placeholder="Your Name">
</div>
.form-control input, .form-control textarea doesn't seem to work?
An easy way is to add an id to the form in question:
<div class="form-control" id="my-form">
Then, style the inputs in css like:
#my-form input {your-style:value;}
.form-control input, .form-control textarea
Seems that you have this kind of code :
<div class="form-control">
<input>
</div>
Your CSS selector should be like this :
input.form-control, textarea.form-control don't forget the `!important` when you apply the css property
Try:
input.form-control {
background-color: #000 !important;
}
You'll have to add !important to your css also in order to overwrite the styles applied to input, textarea. However, if possible, you should remove the !important altogether unless 100% necessary.
Related
I am using jquery form validation and I need to apply color code for all the textboxes in the form without specifying each textbox id in the Css. Instead How to apply css for all the text box in the form using the form id. Please let me know is there any solutions.Thanks in advance.
#formID input[type="text"]{
Put your css here
}
in css, you can do this:
form input {
// Your formatting comes here..
}
or if you want this to apply for a specific form having an id="myForm":
#myForm input {
// formatting comes here for example: color:red;
}
The background knowledge for this is CSS Selectors.
If by textboxes you mean <input type="text"> and <textarea> elements, you can simply style them using the following:
#formid input[type=text],
#formid textarea {
/* CSS rules */
}
Note that <input> elements with types other than text exist. Read more about those here.
Try this...
#frm1>input[type="text"]{
border:1px solid red;
width:100px;
margin:1%;
}
<form id="frm1">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
You can use the .children() function of the jQuery api to set the css properties of the form elements.
eg : jsFiddle
$('#FormID').children().css("property", "value");
I have a form that is structured similarly to the one below. How do I use CSS to style the input[type=submit] element when the input[type=text] is focused?
For example:
<form id="example">
<input type="text" name="search">
<input type="submit" value="Search">
</form>
<style>
#example > input[type="text"]:focus {
// please style input[type="submit"]
}
</style>
I'm trying to accomplish this because a wordpress theme has a search form with the search input and submit button inline. When a user focuses on the input, I want the input field and submit button to have the same border color change.
Alternatively, I could style the entire div around the input and submit button, but then we come back to the problem of styling another element when one element is focused.
Is this even possible with CSS3 or would I have to resort to a javascript function? (Last resort.)
If the structure in your actual code is the same as what you've posted in question, you can use + (adjacent) selector to select the submit button when there's focus on text input.
This is the selector you're looking for: #example > input[type="text"]:focus + input[type="submit"]
To read more about + selector, this answer to "What does the “+” (plus sign) CSS selector mean?" explains it in a short manner and even covers browser support.
Here is a snippet to show it in action. Doesn't look too pretty, but does the job :)
#example > input[type="text"]:focus + input[type="submit"] {
background: gray;
}
<form id="example">
<input type="text" name="search">
<input type="submit" value="Search">
</form>
Here is a way using JQuery, see fiddle https://jsfiddle.net/t33rdra6/2/
$(document).ready(function() {
$('input').blur(function() {
$('input[type="submit"]').removeClass("focus")
})
.focus(function() {
$('input[type="submit"]').addClass("focus");
});
});
I generate the following HTML with Django:
<p>
<label for="id_username">
Username:
</label>
<input id="id_username" type="text" name="username" maxlength="30"></input>
</p>
... and use the following CSS code to try to decorate labels and text inputs:
form.registration p label,
form.registration p input
{
width: 250px;
}
In the end, the navigator (Firefox) only changes the width of the input text boxes, but not the one of the labels. Does anybody know why?
Generally, the default display for label in most browsers is display: inline. This means that a set width will not effect any changes. Add display: inline-block to the properties (this won't affect the <input>, which are already display: inline-block)
Can we add space between the browse button and textbox for input type file ?Is that possible? Aslo can i add border color for the same textbox ?
thanks,
michaeld
Increasing spacing is not possible. Generally speaking, styling an input type="file" is extremely difficult. If you check cross-browser, you can see that different browsers render it differently. The only way to style it is to fake another element as input type="file"
Example: http://www.quirksmode.org/dom/inputfile.html
You should use css to do this:
Your html:
<input type="text" class="yourclass" name="yourname" />
<input type="submit" />
your css:
<style> input.yourclass { border:1px solid red; margin-right: 10px;} </style>
Hope this puts you in the right direction
It is working for me in Chrome.
input.file {
text-indent: initial;
}
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}