In one file called first.css, there is a lot of CSS that I need in it but this is one piece of CSS that I don't need as seen here but seems to be getting applied to my input:
first.css:
.ng-invalid :not(.ng-valid)>.form-control {
border-color: #b94a48;
-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);
}
.ng-invalid :not(.ng-valid)>.form-control:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
I basically do not want that CSS not to apply to my input form so I do something like this:
second.css:
.ng-invalid :not(.ng-valid)>.form-control input {
//I simply want the default CSS to apply, and not that from first.css
}
.ng-invalid :not(.ng-valid)>.form-control:focus input {
//I simply want the default CSS to apply, and not that from first.css
}
second.html:
<form style="margin-top: 10px" name="configurationForm" ng-class="{'submitted': submitted}" ng-submit="createConfiguration(configurationForm.$valid)" novalidate>
<div class="form-group row" ng-class="{'has-error': configurationForm.name.$invalid && !configurationForm.name.$pristine && submitted }">
<label for="name" class="col-xs-1 col-form-label">Name</label>
<div class="col-xs-11">
<input name="name" style="font-size: 10px; border-radius: 4px !important;" type="text" class="form-control" placeholder="Name" ng-model="configuration.name" required />
</div>
</div>
... <More form-control> ...
</form>
Is there a way to simply prevent the CSS from first.css from applying? I simply want the default configurations (whatever they are) to apply and not the above which is why I left second.css css elements empty. Any help would be appreciated. Thanks.
Load second.css after first.css
<head>
<link rel="stylesheet" type="text/css" href="first.css">
<link rel="stylesheet" type="text/css" href="second.css">
</head>
Then in second css reset those style to none . But it seems like border-color can't have none value so you may try transparent
.ng-invalid :not(.ng-valid)>.form-control input {
border-color: 'transparent';
-webkit-box-shadow: 'none';
box-shadow: 'none';
}
.ng-invalid :not(.ng-valid)>.form-control:focus input {
border-color: 'transparent';
-webkit-box-shadow: 'none';
box-shadow: 'none'
}
try to use none value for box-shadow property in second.css
Just add new properties to second.css to override CSS style of first.css
https://jsfiddle.net/vLhuowss/
.myDiv {
height: 100px;
width: 100px;
background-color: red;
}
.myDiv {
background-color: blue;
}
<div class="myDiv"></div>
Related
Is there a way to style a class only if an aria-label in a different element is set to a value?
Here's an example:
[aria-label*="Offline"] {
color: transparent;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.text { /* is there a way to only make this happen if aria-label="Offline" without changing the html? */
color: transparent;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
<div class="user">
<div class="status">
<div aria-label="Offline">Offline</div>
</div>
<div class="content">
<div class="name">
<div class="text">Name</div>
</div>
</div>
</div>
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
What is the best way to align form inputs next to labels
without using a fixed label width, as this looks bad if the labels are much shorted then the specified length (especially when using a textarea in the same form, this looks very bad)
without using 2 columns (as inline div or table), one for labels and one for inputs, as this will break responsive layouts where label and input are on separate lines
Check this fiddle..Link
<label class="medium-inline">
Label
</label>
<div class="medium-inline">
<input type="text"/>
</div>
#media only screen and (min-width: 30em) {
.medium-inline{
display:inline;
}
}
#media only screen and (max-width: 30em) {
.medium-inline{
display:block;
}
}
All i did is change display property to inline and block respectively.
One way would be to make use of flexbox and to set flex:1 on the input to fill the remaining width of the container
Demo 1
NB: The above demo obeys the OP's constraint that no fixed width is set on the label.
If however min-width may be used on the label (corresponding to the longest label) then we can easily update the code to achieve a responsive / 2-column look:
Demo 2
.container {
width:80vw;
margin: 0 auto;
padding: 40px;
border: 1px solid black;
}
label {
display: inline-block;
padding: 8px 10px 0 0;
/* min-width: 150px; (for demo 2) */
}
p {
display: flex;
}
input {
-webkit-box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
-moz-box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
border: 0;
padding: 10px;
flex: 1;
}
<div class="container">
<form>
<p>
<label>*First Name</label>
<input type="text" />
</p>
<p>
<label>*Last Name</label>
<input type="text" />
</p>
<p>
<label>*Label3</label>
<input type="text" />
</p>
<p>
<label>Very very long label4</label>
<input type="text" />
</p>
</form>
</div>
At the moment I have 3 images and when hovered they have a border around them, what I want is when the user clicks the image the hovered style remains on that image, I tried using :active but to no avail.
Here is the CSS code:
.portfolio-image{
border: 1px solid #e8ebef;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}
.portfolio-image:hover{
border:1px solid #123;
box-shadow:none;
}
and the fiddle: http://jsfiddle.net/N22Jc/
:active only stays in effect when the user has the mouse pressed down on the element.
You will need to use JavaScript to accomplish this.
Try this, CSS:
fieldset{
border:0px; padding:0px;
}
img.style1{
border: 1px solid #e8ebef;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}
img.style2{
border:1px solid #123;
box-shadow:none;
}
JavaScript (head):
`function changeStyle(id, newClass){
document.getElementById(id).className = newClass;
}
function changeOther1(newClass){
document.getElementById("i1").className = newClass;
}
}
HTML:
`<fieldset class="radios"><label for="one" class="label_radio">
<img src="yourimage.jpg" id="i1" class="style1" onclick="changeStyle(this.id, 'style2');">
<input name="number" id="one" value="" type="radio" /></label></fieldset>
I didn't test the code, but you get the idea. (I used radios, because I assume you want these to be used in a form?)
If you want to give the focus on an element by clicking on it , that doesn't usually take focus unlike form elements, You need to add the tabindex attribute and set it to 0 in order to have a div or an img to be able to take the focus and use in CSS :focus.
In your fiddle , you draw a border on a div that holds a link that holds an image. the div has no tabindex.
When you click this box , this is the link that catch the click, not the div nor the image , and off you go and :focus is not usable like this.
You could use :target if structure allows you to do so via CSS, DEMO.
instead using nth-child(x) as in demo , you could use single ids on your boxes to select them clearly and not mind in wich number position they stand.
Here's a jQuery solution if you're interested and here's a FIDDLE
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
img {
width: 150px;
height: 150px;
margin: 20px;
cursor: pointer;
border: 1px solid gray;
}
.active {
border: 1px solid red;
}
<script>
(function($) {
$('.item').click(function() {
$(this).addClass('active').siblings('.item').removeClass('active');
});
/* Requires jQuery UI
$('.item').click(function() {
$(this).switchClass('item','active',300).siblings('.active').switchClass('active','item',300);
});
*/
})(jQuery);
</script>
*Note: Put script just before the </body> tag.
Of course to be able to use jQuery you must include jQuery library in the <head> section of your HTML document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- And if you want to use script above which requires jQuery UI -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
*Note: You can also download jQuery & jQuery UI libraries and instead CDN versions you'll be able to load local versions. Download jQuery - Download jQuery UI
If you decide to use local versions. download them, put them in the root folder of your site and include them like below
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui-1.10.4.min.js"></script>
</head>
Also you can put the libraries in folder e.g. js or scripts and then just change path to your local libraries versions
<head>
<script src="scripts/jquery-1.11.0.min.js"></script>
<script src="scripts/jquery-ui-1.10.4.min.js"></script>
</head>
That's it, if you decide to use jQuery and if you have additional questions, ask ;)
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.