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");
});
});
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 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.
Small question but, cannot find method to solve this little problem. I have html form
<div id="todolist">
<span class="add-on">OK</span>
<input class="addtodo" placeholder="New todo task" name="TITLE" type="text" >
</div>
in CSS
#post-todo span{
color:#aaa;
}
I want to change color:#333 when focused on input,
how do this?
use CSS:focus selector
something like below.
input:focus
{
background-color:yellow;
color:blue;
}
For suppose your OK span would be placed after the input then the below code will work without the help you of the jQuery. Only the CSS will do the trick.
<div id="todolist">
<input class="addtodo" placeholder="New todo task" name="TITLE" type="text" >
<span class="add-on">OK</span> <!-- span must be after input-->
</div>
.addtodo:focus + .add-on
{
background-color:yellow;
color:blue;
}
The + in the CSS is used to Matches any element immediately preceded it by a sibling element.
Consider
E + F
{
// code
}
Then Matches any F element immediately preceded by a sibling element E.
Here is the Demo http://jsfiddle.net/UxZXN/
Unfortunately it is not possible with pure css to change the span styling when focussing the input. Using the :focus selector works only for child elements of the focused one.
But there is a fairly simple javascript jquery method :
$("#post-todo .addtodo").focus(function(){
$("#post-todo .add-on").css("color", "#333");
})
$("#post-todo .addtodo").blur(function(){
$("#post-todo .add-on").css("color", "#aaa");
})
See here: http://jsfiddle.net/BEeNa/
It finally become possible, just a few years later...
It is possible with support of :focus-within.
#todolist:focus-within .add-on { color: #aaa; }
<div id="todolist">
<span class="add-on">OK</span>
<input class="addtodo" placeholder="New todo task" name="TITLE" type="text" >
</div>
I am trying to change the way a submit button looks - i am unable to us id or class or anything like that.
i have a div - inside this div 2 inputs 1 is a text the other is submit let say the div's class is holder.
<div class="holder">
<input type="text" name="somename" value="somevalue">
<input type="submit" name="submit" value="save changes">
</div>
my current css is:
.holder input, textarea {
width:250px;
}
However for this change both input types. and i am trying to change them individually.
You can specify the specific attributes required for css properties:
.holder input[type=submit] {
width:250px;
}
Reference: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Basically, it means that the width property only applies to <input> tags inside the #holder container IF the type attribute has a value of "submit".
You can also use this on the name attribute:
.holder input[name=submit] {
width:250px;
}
The selector for the submit input would be:
.holder input[type="submit"]
Note that your div has a class of "holder", not an id of "holder", so use . not #.
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;
}