i have this style in my index.css :
.sidebar-5 {
background-color: #EDEDED;
border: 1px solid #999999;
float: right;
height: 214px;
width: 498px;
border-radius:none !important;
}
and i can use this style to set all class for sidebar and box-sml
[class^="sidebar"] , [class^="box-sml"] :not(#sidebar-5) {
border-radius: 7px 7px 7px 7px;
}
or
[class^="sidebar"] :not(#sidebar-5), [class^="box-sml"] {
border-radius: 7px 7px 7px 7px;
}
i want to use not() for skip #sidebar-5 element and i can not do it. how to resolve this problem?
Use this:
#sidebar-5{
border-radius: 0px 0px 0px 0px !important;
}
Or if its a class:
.sidebar-5{
border-radius: 0px 0px 0px 0px !important;
}
Related
When we use input range <input type="range", there is a handler which is moveable as how we handle it.
Now I need a help how to customize this handle, in this case I want to change the default handler with my own handler(image of button).
Thanks for the help
<input type='range'/>
Use the following to style the base:
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent; /* Hides the slider so custom styles can be added */
border-color: transparent;
color: transparent;
}
Use the following to style the thumb:
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
Snippet:
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #ac51b5;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #65001c;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ac51b5;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #ac51b5;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #65001c;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #65001c;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
background: #ac51b5;
}
body {
padding: 30px;
}
<input type="range" />
Reference: Styling Cross-Browser Compatible Range Inputs with CSS
Please take a look at my site http://kaniamea.com/2/ I am trying to get the contentarea appear correctly behind the three Attractions boxes. My css is:
#attractions {
width: 290px;
height: auto;
display: block;
padding-right: 20px;
float: left;
}
and this is the code of my main container:
#main {
margin: 10px auto 0px;
width: 950px;
max-width:100%;
background: none repeat scroll 0% 0% #FBFBFB;
padding: 10px;
background-color: #FFF;
border: 2px solid #FFF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}
When I remove float: left; from #attractions and replace it it with display: inline-block; it works but I need to figure out another solution with float: left; so this will float correctly on mobile. Is there another way to make the contentarea styles appear behind the boxes?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm wondering if it is possible to create button looks like this:
With CSS only (no additional images).
What do you think?
Yes, it is possible using box-shadow. The example uses an anchor (a) tag but can very easily be adapted to a button also.
a {
background: beige;
border-radius: 4px;
text-decoration: none;
display: block;
padding: 4px;
width: 100px;
text-align: center;
color: black;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
}
<a href='#'>Text hover</a>
Applying on button element: (Note to use border: 0px as buttons have a default border).
.shape {
background: beige;
border-radius: 4px;
padding: 4px;
width: 100px;
text-align: center;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
border: 0px;
}
<button class='shape'>Text hover</button>
Not sure why everyone is suggesting to use box-shadow, you can do this with border-radius and a bottom border alone:
body {
background: #000;
}
button {
background: #B6B694; /* Guesswork, you can find the actual colour yourself. */
border: none;
border-bottom: 2px solid #f00;
border-radius: 5px;
display: inline-block;
font-size: 14px;
padding: 10px 14px;
text-align: left;
width: 150px;
}
<button>Text hover</button>
You should post the code what tried so far. Any way try this one.
body {
background-color: #333;
text-align: center;
padding-top: 20px;
}
button {
background: beige;
border-radius: 3px;
box-shadow: 0px 5px 0px maroon;
border: 0;
color: #333;
font-size: 17px;
padding: 10px 30px;
display: inline-block;
outline: 0;
}
button:hover {
background: #eaeab4;
box-shadow: 0px 5px 0px #4d0000;
}
button:active {
box-shadow: none;
margin-top: 5px;
}
<button type="button">Text hover</button>
From http://www.css3.info/preview/box-shadow/:
Example Q shows a shadow offset to the bottom and right by 5px, with a border-radius of 5px applied to each corner:
#Example_Q {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px black;
-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;
}
Example R shows the same shadow with a blur distance of 5px:
#Example_R {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
.example {
moz-border-radius:20px;
webkit-border-radius:20px;
border-radius:20px;
}
You want to make sure the radius works in every browser so use this code make the radius to work in all browsers.
try it your own
border-radius:20px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
I have a gridview and the first column has a checkbox to select every row. I have written some CSS for the checkbox but as the checkbox doesn't have any text within it nothing is displayed. If I include any text in the checkbox then the CSS works fine.
I don't need text or to hide the text (if dummy required) to make the look and feel the same throughout.
This is my CSS:
input[type="checkbox"] {
position:absolute;
opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
}
input[type="checkbox"] + label {
position:relative;
padding: 3px 0 0 25px;
}
input[type="checkbox"] + label:before {
content:"";
display:block;
position:absolute;
top:2px;
height: 12px;
width: 12px;
background: white;
border: 1px solid gray;
box-shadow: inset 0px 0px 0px 2px white;
-webkit-box-shadow: inset 0px 0px 0px 2px white;
-moz-box-shadow: inset 0px 0px 0px 2px white;
-o-box-shadow: inset 0px 0px 0px 2px white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
}
input[type="checkbox"]:checked + label:before {
background: #88bbd4;
}
I need the grid column like the image shown here:
Your CSS just doesn't sync with what you are after. You don't need all that stuff. And why border-radius? Do you want them to look like radio buttons?
What you could do is simply this:
Demo: http://jsfiddle.net/abhitalks/ZdyC7/
CSS:
input[type="checkbox"]::after {
content: '';
display: inline-block;
width: 16px; height: 16px;
background-color: white;
border: 1px solid gray;
box-shadow: inset 0px 0px 0px 2px white;
-webkit-box-shadow: inset 0px 0px 0px 2px white;
-moz-box-shadow: inset 0px 0px 0px 2px white;
-o-box-shadow: inset 0px 0px 0px 2px white;
}
input[type="checkbox"]:checked::after {
background-color: red;
}
I’m trying to fit a button with a textfield so I’ve been trying different dimensions (height’s button) until they conceded. The problem is: on Chrome looks great but in Firefox they don’t fit as I expected. How can I fix it?
Thank you for your help!
Chrome:
http://imageshack.us/a/img401/5964/mlvq.png
Firefox:
http://imageshack.us/a/img707/2672/u1c.png
Code:
#textfield
width: 120px;
border: 1px solid #aaa;
border-radius: 8px 0 0 8px;
padding-top: 5px;
font: 22px Arial, Helvetica;
padding-bottom: 5px;
padding-left: 5px;
box-shadow: 0px 0px 3px #E7E7E7, 0 10px 15px #E7E7E7 inset;
outline: none;
}
#button {
border-radius: 0 8px 8px 0;
border: 1px solid #aaa;
padding-top: 5px;
margin-left: -5px;
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
box-shadow:inset 0px 1px 0px 0px #caefab;
background-color:#77d42a;
display:inline-block;
color:#306108;
font-family:arial;
font-size: 20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
padding-top: 7px;
text-shadow:0px 1px 0px #aade7c;
}
Shouldn't you specify the height for both of them ?
height: XXpx;