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
Related
I had a problem where a text on a button went over the edge of the button. The text on the button was: "Thanks". I solved that with adding the below to the code. This solved the problem.
HTML
<div class="sign-up">
<p class="sub-header">#Helpers.GetText(CurrentPage, "signupHeaderText", CurrentPage.Parent)</p>
<form id="signupForm">
<div class="form-group">
<label class="sr-only" for="name">#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)</label>
<input type="text" class="form-control" placeholder="#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)" id="name" name="name" required />
</div>
<div class="form-group">
<label class="sr-only" for="email">#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)</label>
<input type="email" class="form-control" id="email" name="email" placeholder="#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">#Helpers.GetText(CurrentPage, "signupCtaButtonText", CurrentPage.Parent)</button>
</form>
</div>
CSS
.btn.btn-default.active,.btn.btn-default:active,.btn.btn-default:hover {
background-color: #71a0af;
color: #fff;
box-shadow: none
<!-- i added the below code to this class: -->
text-align: left;
padding-left: 12px;
width: 90px;
}
The problem is now that i discovered that another button is using the same class, but the text is here: "Yes please". That means that the button now is to small, and the text is flying over the side again.
What is the best solution on this problem? Should I make another class for the other button, or can I make it responsive, so that the button is adapting to the text?
Best Regards
This is an excerpt of my download class (because I mainly use it for download source code or download buttons above an article):
.download
{
display: inline-block;
/* gradient */
background-color: #627A85; /* old browsers */
background-image: -moz-linear-gradient(top, #8A9FA9 0%, #4B5E66 100%); /* firefox */
/* some other gradients removed here, for brevity */
border: none;
border-radius: 6px;
/* some other settings here removed for brevity */
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4), -2px -2px rgba(0, 0, 0, 0.2) inset;
line-height: 24px;
margin: 10px 0 0;
font-size: 16px;
padding: 5px 12px 7px 15px;
}
As you can see: no fixed width. The main part is the padding and the use of inline-block.
Am trying to make my fieldset data to be at center of the page but it displays in my page towards left. It displays fine fiddle, http://fiddle.jshell.net/8SuLK/ but not displaying to center of page in browser. How to go about.
Thanks in advance.
Remove position from fieldset and try like this: DEMO
CSS:
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
text-align:center;
display:block;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
width:70%;
border: 2px groove threedface;
}
If you don't need to have your fieldset positioned as fixed then you can center it in two ways.
1) Setting a width to your fieldset and add auto to its margin property.
EXAMPLE
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
border: 2px groove threedface;
width:75%;
}
DEMO http://fiddle.jshell.net/8SuLK/3/
2) Adding a wrapper to your fieldset and set it as text-align:center; and then set display:inline-block; to the fieldset.
EXAMPLE
<div class="wrapper">
<fieldset>
<label>First Name:</label>
<input type="text" />
<label>Middle Name:</label>
<input type="text" />
<label>Last Name:</label>
<input type="text" />
<label>Date of Birth:</label>
<input type="date" />
</fieldset>
</div>
.wrapper{text-align:center;}
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
display:inline-block;
border: 2px groove threedface;
}
DEMO http://fiddle.jshell.net/8SuLK/4/
PS. Just a reminder in your jsfiddle you can see the syntax highlighter showing in red the syntax errors. In your case the last closing tag, </fieldset> was in red because each input tag wasn't closed. Remember the right syntax for input is <input type="text" />.
Furthermore it's good practice to add the id to each input <input type="text" id="firstname" /> and then specify what the label is for like <label for="firstname">First Name</label>
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/
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.