I am trying to style a search input box, such that, when the user, click into the box, it changes to a different color, and to get rid of the blue outline that indicates that the user has selected the text box.
Any suggestions or ideas? Thanks.
jsFiddle: http://jsfiddle.net/7t5AY/
HTML:
<input type="text" id="text-search" placeholder="Search" >
You can use the :focus selector, e.g:
Demo Fiddle
input[type=text]:focus{
outline:none; /* removes the blue outline on focus */
background:lightgrey; /* however you wish to style */
border:1px solid black; /* however you wish to style */
}
Or more stylishly..
Note that in HTML5, input type="search" is a valid designation
Related
I am not at all getting how to use more advanced css-selectors like + or >
But as I am now needing it to prevent too much JS, maybe someone can help me out with this particular situation of this block:
<section class="rf_re1-suche_container">
<input type="search" placeholder="Your search">
<button>Send</button>
</section>
and I wanna do that:
.rf_re1-suche_container input:focus{
background:orange;
}
but also for the button. So: If the input has a focus I want the input AND the button to have the same background. How would I do that? Thanks!
You will need to target the input and the button separately. Because you want this to apply only when the input has focus, you will need to repeat the entire selector including the input:focus portion, then use a + combinator to link the button to the focused input:
.rf_re1-suche_container input:focus,
.rf_re1-suche_container input:focus + button {
background: orange;
}
<section class="rf_re1-suche_container">
<input type="search" placeholder="Your search">
<button>Send</button>
</section>
Just add the selector for the button, separated with a comma:
.rf_re1-suche_container input:focus,
.rf_re1-suche_container input:focus ~ button {
background: orange;
}
The tilde (~) is the general sibling selector. It selects the element ONLY if it is preceded by the element before the sibling.
This is by the way quite similar to the adjacent sibling selector, but with the latter the two elements need to be right behind eachother. In your case it doesn't really matter, as these two elements are the only one in the parent.
With the following HTML:
<input type="text">
And the CSS:
input[type="text"] {outline: none; border: thin solid red}
input[type="text"]:active {border: thin solid yellow}
I hoped that the text field would have a yellow border when it is active (when the user is typing). However, the new style only applies when you are clicking on the element. How can I reach the effect I want?
You should use :focus:
input[type="text"]:focus {border: thin solid yellow}
JSFiddle Demo.
From W3C:
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
I am using Bootstrap 3 and am trying to make it so that the entire form (input field AND button), change the border color on focus. Meaning, if I click in the input field, the entire border of the button should also change colors, not just the border of the input field. Does that make sense?
Here is the code:
<form class="form-inline" role="form">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</form>
and the CSS:
.form-control:focus {
border-color:#1ABC9C;
box-shadow:none;
}
The problem with that is ...it just changes colors of the input field, not the button, unless someone clicks the button. How do I make it change colors for both at the same time?
Fiddle: http://jsfiddle.net/CbGpP/
Use the adjacent sibling selector so your CSS looks like this:
.form-control:focus, .form-control:focus + span .btn{
border-color:#1ABC9C;
box-shadow:none;
}
It's supported in all major browsers including IE7+.
Here it is working: http://jsfiddle.net/CbGpP/2/
You have to be a little hacky if you're not using JS, so this won't be flexible if you change your layout, use with caution.
.form-control:focus,
.form-control:focus + .input-group-btn > .btn {
border-color:#1ABC9C;
box-shadow:none;
/* outline: 5px solid red; */
}
You could use ~ in css to hover over one element and select another. You could also remove the left and right border of either element so they look like one.
DEMO http://jsfiddle.net/kevinPHPkevin/CbGpP/4/
.form-control:focus ~ span .btn{
border-color:#1ABC9C;
box-shadow:none;
border-left: #ccc;
}
I am working on my website so it look and work almost the same even if JavaScript is disabled, So i have a INPUT and TEXTAREA tags when JavaScript is enabled i can focus my mouse on the INPUT and the TEXTAREA style become display: block from display: none, Is there a way to check with CSS if the user is focus on the INPUT tag and then apply some styles to the TEXTAREA tag?, Thank you all and have a nice day.
If you have the textarea after the textbox than yes, you can use + adjacent selector
textarea {
display: none;
}
input[type=text]:focus + textarea {
/* Switching styles for textarea when textbox is focused*/
display: block;
}
Demo
Note: Add a class to input[type=text] for selecting specific
element, else the above selector will trigger all textarea and
input[type=text] elements
You can use an adjacent selector like this:
JSFiddle Demo
HTML:
Click on the text input
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
CSS
input[type=text]:focus {border:1px solid red; }
textarea { display:none; }
input[type=text]:focus + textarea {display:block; }
Though you will notice that you can't actually click and focus on the textarea when it appears.
Yes, you can do it with CSS using Pseudo-classes
Example for :focus
To avoid hiding the textarea after focusing on input use the following:
textarea:hover,textarea:focus{
display:block;
}
See the demo here.
iOS devices add a lot of annoying styles on form inputs, particularly on input[type=submit]. Shown below are the same simple search form on a desktop browser, and on an iPad.
Desktop:
iPad:
The input[type=text] uses a CSS box shadow inset and I even specified -webkit-border-radius:none; which apparently gets overridden. The color and shape of my input[type=submit] button gets completely bastardized on the iPad. Does anyone know what I can do to fix this?
The version I had working is:
input {
-webkit-appearance: none;
}
In some webkit browser versions, you may also be faced with the border-radius still being in place. Reset with the following:
input {
-webkit-border-radius:0;
border-radius:0;
}
This can be extended to apply to all webkit styled form components such as input, select, button or textarea.
In reference to the original question, you wouldn't use the value 'none' when clearing any unit based css element.
Also be aware that this hides checkboxes in Chrome, so perhaps use something like input[type=text] or input[type=submit], input[type=text] or instead filter out those that don't use rounded corner settings such as input:not([type=checkbox]), input:not([type=radio]).
You can get rid of some more webkits form, input, etc. styling with this:
input, textarea, select {
-webkit-appearance: none;
}
For the submit button don't use:
<input type="submit" class="yourstylehere" value="submit" />
Instead use the button tag:
<button type="submit" class="yourstylehere">Submit</button>
This worked for me.
have a look to normalize.css
There's a demo where you can test the form elements and see how they look like in ios.
There are multiple webkit oriented properties.
This is the what I use in my projects
* {
-webkit-tap-highlight-color: transparent;
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
-moz-user-select: none;
-webkit-user-select: none;
}
input, select, textarea {
-webkit-appearance: none;
-webkit-border-radius:0;
border-radius: 0;
}
You also get this problem in some browsers if you have the following:
<a class="btn btn-primary" href="#" type="button">Link</a>
instead of:
<a class="btn btn-primary" href="#" role="button">Link</a>
This can happen if you change your input element for an anker element and forget to change type to role.
I had this problem on both Chrome and Safari on my IPad.