box-shadow works in all browsers but Chrome - css

Original code that puts a drop shadow at the bottom of my home page header (http://gsmile.org/Word-Dev/) in all browsers except Chrome:
.page-id-48 #main-header {
box-shadow: 0 1px 10px 0 #000000 !important;
}
Revised code, based on other suggestions, but still doesn't work:
.page-id-48 #main-header {
-webkit-box-shadow: 0 1px 10px 0 #000000 !important;
-moz-box-shadow: 0 1px 10px 0 #000000 !important;
box-shadow: 0 1px 10px 0 #000000 !important;
}

Do not know exactly why Chrome is behaving like this. At first it looked like the shadow was hidden on page load. In Chrome it works if you set the "spread" value to at least one Pixel instead of zero (I tried in the debugger console).
.page-id-48 #main-header {
box-shadow: 0 1px 10px 1px #000000 !important
}
Play a bit with different properties on your page.
More info on box-shadow here: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
This is just for old browsers for a newer Google Chrome this will definitly have no impact:
-webkit-box-shadow: 0 1px 10px 0 #000000 !important;
-moz-box-shadow: 0 1px 10px 0 #000000 !important;

.page-id-48 #main-header {
box-shadow: 2px 2px 10px 1px #666 !important;
}
looks like you had you height and spread set to zero, just change those values and it should be fine ... I also changed to black to a dark grey for aesthetic reasons

Related

How to remove or set form input background-color in chrome?

I add this style into my scss file:
input:-webkit-autofill {
background-color: $background-white !important;
-webkit-box-shadow:0 0 0px 1000px $background-white inset !important;
}
input:-webkit-autofill:focus {
background-color: $background-white !important;
-webkit-box-shadow: 0 0 0px 1000px $background-white inset !important;
}
but it didn't work, and I don't want to set my form autocomplete to off.Is there another way for this problem?

Apply Custom Border Style for Sharepoint 2013 Webparts

I want to give my custom border style to all the Webparts available in sharepoint. So that i have added the following class.
.s4-wpcell-plain
{
border:1px solid #d8d8d8;
}
It is applying almost all the webparts. But the problem is it is adding border unnecessarily other places also. Like when search using E-Search page all the results are coming with the borders. It is applying for sharepoint Blog page also.
How can I get rid of those unnecessary borders? or Which CSS I need to apply so that it will only apply for the webparts.
Try applying your border to the following class instead:
.ms-webpartzone-cell {
border: 1px solid #D8D8D8;
}
Okay so I was messing with this as well. The only way it worked for me was to apply the code to the following
.s4-wpcell {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
.ms-webpart-chrome {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
.s4-wpActive {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
So this will apply it to all web parts (I was using a wiki page so "hidden" parts also had this applied and suddenly appeared). To only apply this style to specific web parts add the .MSOZoneCell_WebPartWPQ# in front of the class.
#MSOZoneCell_WebPartWPQ2 .s4-wpcell,
#MSOZoneCell_WebPartWPQ2 .ms-webpart-chrome,
#MSOZoneCell_WebPartWPQ2 .s4-wpActive {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
Hope this helps.

Change Color of Background Input Field For Autofill Values

I currently have a Rails 4 application running bootstrap-sass for Bootstrap 2. I use localhost for my testing. I have applications with a login screen. The input fields are white with a really thin gray border with blue text. When I type in the fields the background of the input fields are white with blue text. However when I go to the login screen where I have saved my login information the information fills up the fields but changes the background of both fields to yellow with the text black. One is text-field and the other is password-field.
I would like the information to fill in using the css I have defined in the view. Is there a way I can do this with CSS? I have not found anything with this specific issue.
Any help would be appreciated. I will continue searching.
UPDATE 3/28/2014 9:15 am CDT
I successfully implemented the solution from the link that was suggested by Martin to change the background color for autofill. I decided to guess and did a search on webkit font color text and found the solution to change the font color for autofill.
Here is my solution:
input:-webkit-autofill {
-webkit-text-fill-color: $textColor;
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-moz-autofill {
-moz-text-fill-color: $textColor;
-moz-box-shadow: 0 0 0px 1000px white inset;
}
input:-o-autofill {
-o-text-fill-color: $textColor;
-o-box-shadow: 0 0 0px 1000px white inset;
}
input:-khtml-autofill {
-khtml-text-fill-color: $textColor;
-khtml-box-shadow: 0 0 0px 1000px white inset;
}
I had to extend your solution to address the input fields on :focus as well. This code currently works for my needs:
input:-webkit-autofill {
-webkit-text-fill-color: $black;
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-moz-autofill {
-moz-text-fill-color: $black;
-moz-box-shadow: 0 0 0px 1000px white inset;
}
input:-o-autofill {
-o-text-fill-color: $black;
-o-box-shadow: 0 0 0px 1000px white inset;
}
input:-khtml-autofill {
-khtml-text-fill-color: $black;
-khtml-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-webkit-autofill {
-webkit-text-fill-color: $black;
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-moz-autofill {
-moz-text-fill-color: $black;
-moz-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-o-autofill {
-o-text-fill-color: $black;
-o-box-shadow: 0 0 0px 1000px white inset;
}
input:focus:-khtml-autofill {
-khtml-text-fill-color: $black;
-khtml-box-shadow: 0 0 0px 1000px white inset;
}

Does anyone know the CSS to put the outer border around textboxes like this from Twitter?

Does anyone know the CSS required to add an outer border around textboxes like this example from Twitter?
Thanks for the help
outline:
input{outline:solid 4px #ccc}
(another option it to wrap the input with div of course)
You can use the box-shadow property
http://jsfiddle.net/VXJdV/
input {
display: block;
margin: 2em;
box-shadow: 0 0 10px gray;
}
input[type="text"],input[type="password"]{
border: solid 1px #ccc;
padding: 4px;
border-radius:4px;
}
You'll want to cover the other border radius too, -moz- & -webkit-
Demo: http://jsfiddle.net/BqpZh/
.classname
{
box-shadow:0 0 2px red
}
use this class or you and add box-shadow property to your existing class. You can increase 2px to 5px or 10 for broder shadow
.front-card .text-input:focus {
border:1px solid #56b4ef;
-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6)
}
Using box shadow will help you like this:
class{
box-shadow: horizontal vertical blur-radius spread-radius color;
box-shadow:2px 0 3px 5px red;
}
horizontal (-value will move towards left) (+value on right)
vertical (-value will move upwards) (+value on downwords)
blur-radius: will blur the color you choose around box
spread-radius: will spread color to the chosen distance
You can use a wrapping div outside of the input box and give it that background color and rounded corners!
HTML:
<div class="outter"><input class="inputbox"></input></div>
CSS:
.outter {
margin: 20px;
padding: 10px;
border-radius: 15px;
background-color: red;
display: inline-block;
}
.inputbox {
border-radius: 5px;
}
Here you have a jsfiddle: http://jsfiddle.net/dsBgw/
You can consider using multiple shadows:
input[type="text"]{
box-shadow: 0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}
i have a demo, it it like the login form for twitter. if you want to view, pls click here.

Border color like firebug inspect element

I would like to reproduce the border color made by firebug when you try to inspect the DOM element in a web page.
It looks like the border around the text "Link2" of the following image.
The border around the text "Link" is what I did. The code is visible from this link.
jsfiddle.
Can someone help me to write the css code to reproduce the border of Link2?
Thanks
You'll need to use box-shadows, like this:
http://jsfiddle.net/GolezTrol/AEDsY/
.cl3 {
-webkit-box-shadow: 0 0 3px 3px lightblue;
-moz-box-shadow: 0 0 3px 3px lightblue;
box-shadow: 0 0 3px 3px lightblue;
}
That effect is achieved using the box-shadow css property.
To get as much support as possible, use -moz-box-shadow, -webkit-box-shadow and box-shadow.
To get your desired effect, use:
-moz-box-shadow: 0 0 5px 2px blue;
-webkit-box-shadow: 0 0 5px 2px blue;
box-shadow: 0 0 5px 2px blue;
You would use something like this:
-webkit-box-shadow: 0px 0px 3px blue; /* Saf3-4 */
-moz-box-shadow: 0px 0px 3px blue; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 3px blue; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
Check out http://css3please.com/ - it's a great resource for playing with new CSS properties.

Resources