I want to change the blue glow if the focus on Bootstrap 3 input and textareas.
I tried adding this
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8);
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
outline: 0 none;
}
to my costum.css but it only change the glow of input fields, not textarea.
I also tried this,
.input:focus {
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
which changed nothing.
I am not a CSS savvy so appreciate your help.
Try using:
textarea:focus, input:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8) !important;
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6) !important;
outline: 0 none !important;
}
Related
I have different <div>s with box-shadow. In Chrome desktop, the shadows look fine. However, in mobile, things get strange. I've read different posts with this issue and it was recommended I added a -webkit-appearance: none; but it doesn't do anything. Here's my codepen.
This is what I get in desktop (correct)
And this is what it looks like in mobile Chrome in an iPhone:
Here's my code (I'm using Bootstrap 4):
.white-card-bg {
background-color: #fff;
-webkit-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
-moz-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
-ms-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
-o-box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
border-radius: 24px;
box-sizing: border-box;
border: 2px solid transparent;
box-shadow: 0px 0px 2px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
}
<div class="col-3 nl-servicio-destacado-card btn" type="button" role="button">
<div class="card-body white-card-bg text-center"> Content here </div>
</div>
I figured out what was wrong. Turns out it had nothing to do with the box-shadowit was the type="button" in my html that was causing the iPhone to add that strange shadow to the div. By removing that I solved this issue.
I am trying to get a "cloudy transparent edge" to a bootstrap modal. Is this possible?
I have tried this CSS:
.modal-content {
border: none;
outline: none;
-webkit-box-shadow:
5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
-5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
-moz-box-shadow:
5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
-5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
-o-box-shadow:
5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
-5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
box-shadow:
5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
-5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
}
The effect I want looks lie the photo below, with the blurring to transparent and I want it over 5px all along the square border of the div/bootstrap.
My CSS achieves this for a color but I tried RGBA with opacity and it does not work
My CSS skills are pretty beginner...
I'm unable to override the font color for a link. I want the font color for the link with class="button2" to be white but it stays blue no matter what I try. How can I get the 'color' in my button2 style to be respected?
(it is a Drupal 7 site with UberCart)
Here is the style:
.button2 {
height: 60px;
padding: 10px 15px;
/*background: #4479BA;*/
background: #00CC66;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/*border: solid 1px #20538D;*/
border: solid 1px #003319;
/*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);*/
text-shadow: 0 -1px 0 rgba(121, 121, 121, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
Firebug shows this CSS from another style sheet that appears to be overriding my style
a:link, a:visited, a:active, a.active, li a.active {
color:#2079d2;
}
Did you add this?
color: #FFF !important;
The important part makes it override the other stuff.
What would be the best approach of creating other colors of link buttons, without copying the entire thing again and again.
I already have a blue button.. now i want to have another orange or green button
.blue-button {
padding: 10px 15px;
background: #4479BA;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.blue-button:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.blue-buttonk:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
You can separate the color and background from the button and create another class just for the those properties. i.e. .blue and .red
Then you can move those properties inside those classes applying also the :hover and :active selectors.
In case you want to change color, change the html and change the class blue into red.
HTML
<div class="button blue">Click me</div>
CSS
.button {
display:inline-block;
padding: 10px 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.button:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.button:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
border: solid 1px #203E5F;
}
.button.blue{background: #4479BA; color: #FFF;}
.button.blue:hover{ background: #356094; }
.button.blue:active { background: #2E5481; }
.button.red{background: red; color: yellow;}
.button.red:hover{ background: green; }
.button.red:active { background: pink; }
DEMO http://jsfiddle.net/a_incarnati/douv8oby/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
The code that I currently have is this:
.button2 {
margin-left: 10px;
background-color: lightgreen;
width: 180px;
height:100px;
padding: 50px,60px;
color: rgba(20, 15, 30, 0.8);
text-transform: uppercase;
border: 1px solid green ;
font-weight: bold;
font-size: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
.button2:hover {
background-color:#FF0000;
}
The problem, however, is that whenever I hover my mouse over the div, the background color of the box does not change to red.
How can I make it so that whenever I hover over divs with class button2 it will change to the background color red? Is there a problem with the formatting?
My current HTML is:
<html>
<div class=button2></div>
</html>
Simple syntax error - you forgot to close .button2 {}
jsFiddle example - it works now
Updated CSS
.button2 {
margin-left: 10px;
background-color: lightgreen;
width: 180px;
height: 100px;
padding: 50px,60px;
color: rgba(20, 15, 30, 0.8);
text-transform: uppercase;
border: 1px solid green;
font-weight: bold;
font-size: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
}
.button2:hover {
background-color: #FF0000;
}
As a side note, it's always helpful to view these errors in the F12 dev tool.