I have a form maked with Bootstrap, i want to apply styles to button when the input text is focus (for example when focus background to green), how can i do?
Main structure:
<div class="col-md-5"><div class="input-group">
<input id="inputSearch cf" class="form-control" placeholder="Search..." type="text">
<span class="input-group-btn">
<button id="btnSearch" class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
This is my JSFFidle: http://jsfiddle.net/3Q3Le/
Add this style in your site css file:
.form-control:focus {
border-color: #00cf00;
box-shadow: 0 1px 1px rgba(0, 207, 0, 0.075) inset, 0 0 8px rgba(0, 207, 0, 0.6);
outline: 0 none;
}
.form-control:focus + .input-group-btn .btn { background:green }
Click here for demo
Demo Fiddle
Try adding the below to your CSS:
input[id="inputSearch cf"]:focus{
background:green;
}
Try this: http://jsfiddle.net/3Q3Le/1/
#inputSearch:focus {
background-color: green;
color: #fff;
}
#inputSearch:focus + .input-group-btn #btnSearch {
background: red;
}
If you want you can use jQuery.
$("[id='inputSearch cf']").click(function() {
$("#btnSearch").css("backgroundColor","green");
});
Of course before that you should load jQuery library
Here you can find a demo: http://jsfiddle.net/3Q3Le/4/
Related
I have a text input field inside a form in my react app that looks like this before being clicked on:
After I click inside the input field it looks like this:
I would like the text box to remain the same grayish color when clicked on instead of changing to white. How can I achieve this? This is what I have so far:
html,
body {
height: 100%;
margin: 0;
background: rgb(105, 103, 116);
}
.main-search {
position: relative;
margin-bottom: 10px;
border-radius: 5px;
}
.main-search:hover {
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}
<form onSubmit={this.spinSubmit}>
<div className="input-field container main-search">
<input className="main-search-input-field" id="search" type="search" placeholder="Search..." value={this.state.searchQuery} onChange={this.handleChange} />
<button id="btn-submit-search"><i className="material-icons">search</i></button>
</div>
</form>
I have been doing all this testing in Chrome if that makes a difference.
You could just add
.main-search-input-field {
background-color: gray;
}
To your css file.
use this.
input[type="search"], textarea {
background-color :rgb(105, 103, 116);
border:0px;
}
output:
Another option is to use this. but change "className" to "class"
.main-search-input-field, textarea {
background-color :rgb(105, 103, 116);
border:0px;
}
<input class="main-search-input-field" id="search" type="search" placeholder="Search..." value="search" onChange="" />
You can see this fiddle - Link to fiddle
You only need to apply CSS on your input tag.
input[type="search"] {
background-color :rgb(105, 103, 116);
border:0px;
border-bottom:1px solid #ccc;
}
In CSS:
#search{
background: rgb(105, 103, 116);
}
The solution was to change the type field in my input to "text" instead of "search":
<input className="main-search-input-field" id="search" type="text" placeholder="Search..." value={this.state.searchQuery} onChange={this.handleChange} />
How can I do to override an existing class of Bootstrap
The btn and activeclass names are added automatically from Bootstrap. I want a specific color on the inset.
<div class="categories">
<label class="ng-binding">Categories</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="cat" id="rbOption1"> Cat 1
</label>
<label class="btn">
<input type="radio" name="cat" id="rbOption2"> Cat 2
</label>
</div>
</div>
I've been trying to do this with no positive result
.categories label#active {
box-shadow: inset 0 3px 5px blue !important";
}
As per my understanding of the question, this is what you have to do in order to override the Bootstrap style.
.categories .btn.active {
box-shadow:inset 0 3px 5px blue;
}
If you want to use the same style through out your application or page,
.btn.active {
box-shadow:inset 0 3px 5px blue;
}
You can place an id on the label.
HTML
<label id="active" class="btn">
CSS
#active {
box-shadow: inset 0px 0px 10px #FF0000;
}
codepen
I have the following code:
<div class="row front-page-img">
<img class="img-responsive" src="http://www.echomountainresort.com/wp-content/uploads/2014/10/echo-mountain-concert_banner_bg.jpg" style="box-shadow: rgba(0,0,0,.2) 3px 5px 5px;">
<div class="front-page-container-search">
<h3>This is the text that I wish could be solid white, but instead it is transparent</h3>
<form>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
.front-page-img {
margin-right: 0px;
}
.front-page-container-search{
position:absolute;
left: 50px;
right:50px;
width: 200px;
color: white;
text-align: center;
top: 75px;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid black;
opacity: 0.7;
margin: 0 auto;
}
As you can see here at my jsFiddle my text is not solid white and my input is transparent. Ideally I would like to have solid white text and a solid input. I attempted to use the accepted answer from this older question and tried playing with z-index, but no luck there. Any help is appreciated.
Set your opacity to 1 and wrap the divs correctly. Here is the fiddle.
https://jsfiddle.net/n6qzsttL/
<div class="row front-page-img ng-scope">
<img class="img-responsive" src="http://www.echomountainresort.com/wp-content/uploads/2014/10/echo-mountain-concert_banner_bg.jpg" style="box-shadow: rgba(0,0,0,.2) 3px 5px 5px;">
<div class="front-page-container-search">
<h3>This is the text that I wish could be solid white, but instead it is transparent</h3>
</div>
<form>
<div class="input-group">
<input type="text" class="form-control"> <span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
and the CSS
.front-page-img {
margin-right: 0px;
}
.front-page-container-search {
position:absolute;
left: 50px;
right:50px;
width: 200px;
color: white;
text-align: center;
top: 75px;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid black;
opacity: 1;
margin: 0 auto;
}
There's nothing wrong with your z-indexes. You're setting the opactiy of .front-page-container-search to 0.7. This does what it says on the tin; it renders the element - including everything inside of it - with an opacity of 0.7.
If you don't want the opacity to propagate through the children, don't set it on the parent. Remove this property, and your text, and input, will be solid white.
Currently you are using the opacity for .front-page-container-search as 0.7. Please use 1 instead of 0.7.
.front-page-container-search{
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; // IE8
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=100); // IE 5-7
/* Modern Browsers */
opacity:1;
}
Forms have changed since 2.4.3 and This would have worked before but not anymore.
This is the current code I have for my search bar.
<li>
<div class="input-group" id="fifteenMargin">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
</div>
</li>
This is what it currently looks like.
I would like it to eventually look like this.
Although this question is close this to this one its different as that is just having a button on the outside without space between the two. This is how to get it into the search bar.
Try this..
.input-group-btn > .btn {
border-left-width:0;left:-2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.input-group .form-control:focus {
box-shadow:none;
-webkit-box-shadow:none;
border-color:#cccccc;
}
You may want to use a special CSS class instead of overriding all of the input-groups
Demo: http://bootply.com/86446
try
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input type="text" name="login" class="form-control" placeholder="Ваш логин">
</div>
You can't technically place it "inside" the search box, rather place your submit OVER the search box via absolute positioning.
I got it done using fake div.
FIDDLE
.styleSelect {
position:absolute;
z-index:10;
width: 168px;
height: 34px;
border: 1px solid #000;
}
I tried making a custom submit button for my simple contact form because I wanted to style it a bit with CSS. I set the input type to submit and whenever I click the button it neither submits nor is click able.
I created a class called blue button, and my style will show but cannot submit.
<a class="blue button" input type="submit">Everything? Send!</a>
I then tried this method instead and it submits, but it does not show my style that created!
<input class="blue button" type="submit" value="Send">
Form
<form method="post" id="submitform" action="submitemail.php" >
<input type="text"
class="formstyle"
title="Name"
data-placeholder="Name..."
name="name" />
<input type="text"
class="formstyle"
title="Email"
data-placeholder="Website..."
name="website" />
<input type="text"
class="formstyle"
title="Email"
data-placeholder="Email..."
name="email" />
<input type="text"
class="formstyle"
title="Email"
data-placeholder="Business or Personal?"
name="type" />
<textarea name="message"
data-placeholder="Message..."
title="Message"></textarea>
Is there anyway to have a submit button from element styled button like below?
<a class="blue button" input type="submit">Everything? Send!</a>
CSS as requested:
.button.blue {
border: 1px solid #005998;
}
.button.blue .text {
padding: 16px 31px 14px;
text-transform: none;
text-shadow: 0 -1px 0 #022268;
}
.button.blue .normal {
background: linear-gradient(#00a7f7, #0563bb);
background: -webkit-linear-gradient(#00a7f7, #0563bb);
background: -moz-linear-gradient(#00a7f7, #0563bb);
background: -o-linear-gradient(#00a7f7, #0563bb);
background: -ms-linear-gradient(#00a7f7, #0563bb);
-pie-background: linear-gradient(#00a7f7, #0563bb);
box-shadow: 0 1px 0 #12dbff inset;
-webkit-box-shadow: 0 1px 0 #12dbff inset;
-moz-box-shadow: 0 1px 0 #12dbff inset;
-ms-box-shadow: 0 1px 0 #12dbff inset;
-o-box-shadow: 0 1px 0 #12dbff inset;
behavior: url(pie.htc);
}
.button.blue .hover {
display: none;
background: linear-gradient(#008af3, #0244a2);
background: -webkit-linear-gradient(#008af3, #0244a2);
background: -moz-linear-gradient(#008af3, #0244a2);
background: -o-linear-gradient(#008af3, #0244a2);
background: -ms-linear-gradient(#008af3, #0244a2);
-pie-background: linear-gradient(#008af3, #0244a2);
box-shadow: 0 1px 0 #12c4ff inset;
-webkit-box-shadow: 0 1px 0 #12c4ff inset;
-moz-box-shadow: 0 1px 0 #12c4ff inset;
-ms-box-shadow: 0 1px 0 #12c4ff inset;
-o-box-shadow: 0 1px 0 #12c4ff inset;
behavior: url(pie.htc);
}
<a class="blue button" input type="submit">Everything? Send!</a>
This is totaly wrong. For form submit button:
<input type="submit" class="blue-button" value="submit" />
I dont know if you really understand the concept of css, either way here is what you can try:
1 - remove the .normal from the rules, its not used.
2 - put the input submit inside the form.
3 - order the class on css, like .blue.button not button.blue(jsut to organize)
4 - the .hover is a class or the effect? if its the effect the correct is :hover
try these
You may try something like;
<a class="blue_button" input type="submit"><input class="submit_button" type="submit" value="Send"></a>
and you may give submit_button a styling of display: block; width: 100%; height: 100px; margin: none; border: none;. I recommend giving it a width and height in px (fixed width). This is not tested.
Leaving space in defining class names to elements will treat them as multiple classes. For example, if you use class="blue button", it says that the element may get styling defined on .blue and .button.