I want to style a password strength meter implemented via . It works fine in Firefox, but not in Chrome.
Here is the relevant CSS, taken from the GitHub project CSS file:
meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0 auto 1em;
width: 100%;
height: .5em;
/* Applicable only to Firefox */
background: none;
background-color: rgba(0,0,0,0.1);
}
meter::-webkit-meter-bar {
background: none;
background-color: rgba(0,0,0,0.1);
}
meter[value="0"]::-webkit-meter-optimum-value,
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }
meter[value="1"]::-moz-meter-bar,
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }
The last bit is important, the ability to style based on the meter's value.
It's an intentional behavior change.
https://www.chromestatus.com/feature/5668635896971264
So, you need to remove -webkit-appearance:none, or need to build a meter value box yourself.
<style>
meter {
-webkit-appearance: none;
background: gray;
}
meter > div {
height: 100%;
}
meter[value="1"] > div {
width: 25%;
background: red;
}
meter[value="2"] > div {
width: 50%;
background: yellow;
}
meter[value="3"] > div {
width: 75%;
background: orange;
}
meter[value="4"] > div {
width: 100%;
background: green;
}
</style>
<meter value=3><div></div></meter>
Related
I am changing the css of scroll bar on hover, so whenever a user is over a scroll bar(not on div) the width of scroll should come to normal.
width: 8px;
}
::-webkit-scrollbar:hover {
width: 50px;
background:rgb(204 204 204 / 1);
}
I have tried this, but seems not to be working.
Does this answer your question?
look at this question:
Redraw issue when changing webkit-scrollbar width on hover
div {
width: 300px;
height: 300px;
overflow-y: scroll;
background-color: blue;
}
/* Custom Webkit Scrollbar */
/* http://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
height: 10px;
width: 10px;
}
::-webkit-scrollbar:hover {
height: 40px;
width: 40px;
}
::-webkit-scrollbar-thumb {
background-color: red;
}
::-webkit-scrollbar-thumb:hover {
background-color: blue;
}
div:hover::-webkit-scrollbar-corner {
width: 40px;
/*background-color: red !important;*/
}
::-webkit-scrollbar-track-piece {
/*background-color: #efefef;*/
}
::-webkit-scrollbar-thumb:vertical {
/*background-color: #666;*/
}
<div><img src="http://placehold.it/500x500" /></div>
I have some beautiful CSS:
$itemHeight: 40px;
$arrowModifier: 8;
$pageBackgroundColor: $color-gray-50;
.processBar {
display: flex;
flex-wrap: wrap;
&_item {
display: inline-block;
background: $color-gray-200;
height: $itemHeight;
position: relative;
flex-grow: 1;
text-align: center;
line-height: $itemHeight;
text-decoration: none;
color: $color-text;
padding-left: 10px;
padding-right: 10px;
&:hover {
text-decoration: none;
color: $color-text;
}
&-default {
&:hover {
background: $color-light-gray;
}
}
&-selected {
background: $color-white;
}
&:before,
&:after {
display: inline-block;
content: "";
border-style: solid;
position: absolute;
}
&:first-child {
&:before {
left:0;
border: none;
}
}
&:not(:first-child) {
&:before {
left:0;
border-color: transparent transparent transparent $pageBackgroundColor;
border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
}
}
&:last-child {
&:after {
right: 0;
border: none;
}
}
&:not(:last-child) {
&:after {
right:0;
border-color: $pageBackgroundColor transparent;
border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
}
}
}
}
Here is the HTML that uses it:
<div class="processBar">
Label
Label
Label
Label
Label
Label
</div>
Here is what it does:
But at a certain size the :after elements can jump down, as seen here:
I don't understand why that is happening. How can I stop it from happening?
The ::before and ::after pseudo-elements on a flex container are considered flex items.
The ::before pseudo is the first item. The ::after pseudo is the last. So you have to think of them as siblings of the other flex items.
You can try using the order property to re-arrange items to achieve the effect you want.
What CSS pre-processor is this? I used every pre-compiler on CodePen and got errors from the $variables so I removed them and filled them in with whatever. Is this Stylus? Anyways, besides the variables being removed and some color changes, the only significant change is that I changed flex-wrap:wrap to flex-wrap:nowrap.
SNIPPET
.processBar {
display: flex;
flex-wrap: nowrap;
}
.processBar_item {
display: inline-block;
background: #c8c8c8;
height: 40px;
position: relative;
flex-grow: 1;
text-align: center;
line-height: 40px;
text-decoration: none;
color: #000;
padding-left: 10px;
padding-right: 10px;
}
.processBar_item:hover {
text-decoration: none;
color: red;
}
.processBar_item-default:hover {
background: #808080;
}
.processBar_item-selected {
background: cyan;
}
.processBar_item:before,
.processBar_item:after {
display: inline-block;
content: "";
border-style: solid;
position: absolute;
}
.processBar_item:first-child:before {
left: 0;
border: none;
}
.processBar_item:not(:first-child):before {
left: 0;
border-color: red;
border-width: 20px 0 20px 5px;
}
.processBar_item:last-child:after {
right: 0;
border: none;
}
.processBar_item:not(:last-child):after {
right: 0;
border-color: tomato;
border-width: 20px 0 20px 5px;
}
<div class="processBar">
Label
Label
Label
Label
Label
Label
</div>
Here is my code:
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
/* ??? */
}
How can I have .child inherit background-color: #ccc; without changing the class declaration order?
I tried background-color: inherit; but all I got is a complete reset (ie no color) of the background-color property.
Please also note I can't change neither .ancestor nor .parent.
You could just do this:
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
background-color: #ccc;
}
or you could do:
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
/* ??? */
}
and have
The html div or whatever like this:
<div class="ancestor child"></div>
This would do the trick:
.ancestor, .child {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
You can do this,
.ancestor {
background-color: #ccc;
}
.parent {
background-color: #fff;
}
.child {
background-color: #ccc;
}
I'm getting an error I can't correct when testing with Rspec and Capybara in my rails app.
Failure/Error: visit('/')
ActionView::Template::Error:
Invalid CSS after " text-indent:": expected expression (e.g. 1px, bold), was "}"
It says the error is occurring in app/assets/stylesheets/application.css. I have nothing in there as of yet and cannot locate the issue. I think the error(based on what I've read) may have something to do with my css or scss file extensions. I've tinkered with them a bit with no change so here I am asking for help.
My registration_spec.rb
require 'spec_helper'
describe "Signing Up" do
it "allows a user to sign up for the site and creates the object in the database" do
expect(User.count).to eq(0)
visit('/')
expect(page).to have_content("Sign Up")
click_link "Sign Up"
fill_in "First Name", with: "John"
fill_in "Last Name", with: "Smith"
fill_in "Password", with: "password123"
fill_in "Password Confirmation", with: "password123"
click_button "Sign Up"
expect(User.count).to eq(1)
end
end
Here's my style.css
#about {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#about-content {
text-align: left;
}
#article-image {
float: left;
}
#article-links {
list-style-type: none;
}
#article-links a {
font-weight: bold;
color: #3f4944;
text-decoration: none;
}
#article-links img {
margin-right: 20px;
}
#article-show {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
.bit-5 {
background: white;
padding: 20px;
text-align: center;
border: 2px solid #57645d;
color: #606e67;
float: right;
display: block;
}
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent:
}
.clearfooter {
height: 330px;
clear: both;
}
#contact {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#contact-content {
text-align: left;
}
footer {
position: relative;
width: 100%;
height: 330px;
background: #3f4944;
}
html,body {
background: #efeddf;
height: 100%;
}
#title a {
color: #555;
text-decoration: none !important;
}
#main-header {
height: 180px;
background: #57645d;
position: fixed;
top: 0px;
margin: auto;
z-index: 100000;
width: 100%;
}
#main-nav ul {
text-align: center;
margin-top: 120px;
}
#main-nav ul li {
padding-left: 10px;
display: inline-block;
margin-right: 20px;
}
#main-nav ul li a {
text-decoration: none;
color: #efeddf;
font-size: x-large;
}
#new-article-path a {
font-weight: bold;
color: #3f4944;
}
#recent-article li {
list-style: none;
}
#recent-article li a {
color: #57645d;
text-decoration: none;
}
My grid(lemonade.css)
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
/* Set the width of the grid */
.frame {
margin: auto;
width: 1100px;
margin-top: 200px;
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
/* Attribute selector */
[class*='bit-'] {
float: left;
padding: 0.3em;
}
/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
float: right
}
/* Clearfix */
.frame:after {
content: "";
display: table;
clear: both
}
/* Main Widths */
.bit-1 { width: 100% }
.bit-2 { width: 50% }
.bit-3 { width: 33.33% }
.bit-4 { width: 25% }
.bit-5 { width: 20% }
.bit-6 { width: 16.6666666667% }
.bit-7 { width: 14.2857142857% }
.bit-8 { width: 12.5% }
.bit-9 { width: 11.1111111111% }
.bit-10 { width: 10% }
.bit-11 { width: 9.09090909091% }
.bit-12 { width: 8.33% }
.bit-75 { width:75%}
.bit-25 { width:25%}
/* Landscape mobile & down */
#media (max-width: 30em) {
.bit-1,
.bit-2,
.bit-3,
.bit-4,
.bit-5,
.bit-6,
.bit-7,
.bit-8,
.bit-9,
.bit-10,
.bit-11,
.bit-12 {
width: 100%;
}
}
/* Portrait tablet to landscape */
#media (min-width: 30em) and (max-width: 50em) {
.bit-4,
.bit-6,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
.bit-1,
.bit-2,
.bit-3,
.bit-5,
.bit-7,
.bit-9,
.bit-11 {
width: 100%
}
}
/* Landscape to small desktop */
#media (min-width: 50em) and (max-width: 68.750em) {
.bit-2,
.bit-7 {
width: 100%
}
.bit-4,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
}
Im still pretty new at all this so any help/and or criticisms would be appreciated. Thanks.
Your style.css is invalid which is causing following error:
Failure/Error: visit('/') ActionView::Template::Error: Invalid CSS
after " text-indent:": expected expression (e.g. 1px, bold), was "}"
In your style.css, for class .bit-75, you forgot to set value of text-indent property
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent: // <-- set a value here for eg : 10px;
}
Having some issues trying to create a fixed header layout for this jsfiddle:
http://jsfiddle.net/4xk4D/107/
Basically, I'd like the id element app-header-container to be fixed on the page.
I used this article as a reference but no luck yet!
NOTE: I am using SCSS in the jsfiddle.
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
Trying to modify your css:
#app-header-wrapper
{
width: 1024px;
margin: 10px auto;
background-color: pink;
}
#app-header-container
{
}
#app-main-nav
{
background-color: pink;
}
#app-header
{
height: 93px;
background-color: blue;
}
#app-access
{
background-color: green;
}
#app-content-container
{
width: 1024px;
margin: 10px auto;
background-color: red;
}
#app-content
{
float: left;
width: 739px;
background-color: yellow;
}
#app-sidebar
{
float: right;
width: 275px;
background-color: orange;
}
#app-footer
{
margin: 0 auto;
width: 1024px;
height: 50px;
background-color: pink;
}
.clearfix:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
Or just try using css grid for layouting. One of them http://1kbgrid.com/
#app-header-wrapper {
width: 1024px;
margin: 10px auto;
background-color: pink;
#app-header-container {
#app-access {
background-color: green;
}
#app-header {
height: 93px;
background-color: blue;
}
#app-main-nav {
background-color: pink;
}
}
}
You can not nest CSS that way. Much of the CSS is being ignored due to how you've got it nested and sub nested between brackets. Markup shoul dbe selector { property } or selector, selector, selector { property }