Can't seem to get the following selector working.
Am I doing something wrong?
html body div#main_container form#account_info input[type=text]:disabled::after, input[type=email]:disabled::after {
content: "dfjnsfnj";
position: absolute; float: none; clear: both; display: block;
top: 0; left: 0;
width: 100px; height: 100px; margin: 0; padding: 0;
font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 25px; line-height: 25px; text-align: left;
letter-spacing: -3px;
color: #3d5a71;
background-color: red;
}
While I verified that the construct does work somewhat in current Chrome stable, this seems an unfortunate by-effect of generic parsing.
input is specified in the HTML5 standards as having an "Empty" content model, like other self-closing elements such as <br> and <img>. All of them are therefore not permitted, in any situation, to have child elements. Including pseudo-elements.
Your problem is easily solved by including some extra markup, which would insert the generated content in a more plausible location in the doctree than as the child element of a checkbox. The following example works fine and is semantically correct:
input:disabled[type=checkbox] + label:after {
content:' testing this CSS';
}
<input disabled type="checkbox">
<label>Checkbox for</label>
Since it can't be applied onto input elements.
Added it to the label instead. Works now :)!
html body div#main_container form#account_info input:disabled[type=text] + label:after,
html body div#main_container form#account_info input:disabled[type=email] + label:after {}
Related
As the title says i am trying to make two h2 and span text boxes have a rectangular shape for a website and i need help.
mine's looks like this:
but i want them to look like this:
h2 {
position: fixed;
top: 20rem;
left: 11rem;
text-align: right;
font-size: 1rem;
}
h2 span {
background-color: #556272;
color: #fff;
display: inline-block;
text-align: center;
font-style: normal;
padding: 2rem;
}
h2 span:first-child {
width: 200px;
height: 44px;
font-size: 20px;
}
h2 span:last-child {
transform: translate(-1rem, -1rem);
width: 200px;
height: 44px;
font-size: 15px;
}
<h2>
<span>Web</span> <br />
<span>Development</span>
</h2>
Just my take, but it seems like it'd be easier and more readable to do something like this:
h2 div {
/* various styles for background and colors */
background-color: #ccc; /* just an example */
}
h2 div.first-line {
display: block;
max-width: 200px; /* or whatever */
margin-left: 200px;
}
h2 div.second-line {
display: block;
max-width: 200px; /* or whatever */
margin-left: 100px;
}
<h2>
<div class='first-line'>Web</div>
<div class='second-line'>Development</div>
</h2>
Removing Defauilt styling
Headers by default have more margin on the top. You just want to normalize your styling.
html, body {
margin: 0;
}
This should do the trick, as it removes all margins from all elements. Just put it at the top of your stylesheet. But there are also some normalize.css defaults out there that remove all unwanted default styling.
You can also change the styling on the element itself, or remove all styling from it:
h2 {
all: unset;
}
But usually removing all default styling like this is not what you want. I'm just saying it's an option.
I usually just start styling by starting from something like this:
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: Roboto, 'Helvetica Neue', sans-serif;
background-color: #eee;
/* Some other defaults, like maybe flex attributes depending on your layout. */
}
Tip: When using the browser development tools, you can inspect each tag and see all the styling it has. Try changing / removing things in there, until you've found the culprit of your issues.
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I have a styled sentence with dynamic text. Sometimes the text is too long, and pushes the anchor at the end outside its box. I want the text to wrap after the span.price-difference, but the anchor button to be positioned against the right side of the p.
I added an :after pseudo element to .price-difference. I've got it set content: '' and display: block. Works in FF, Chrome, IE (including IE8, which I have to support), but not Safari.
There is an easy answer, wrapping the text following .price-difference with another span, and set it to block, but changing the HTML is a hassle, requiring a backend developer to make changes to a JSP file, and I'm hoping to avoid that. Looking for a CSS only solution, if it exists.
<p class="upsell"> Upgrade To
<span class="stateroom-upgrade"> Concierge Class </span>
for an additional
<span class="price-difference">$7.14 USD </span>
per person per day
<span>View Upgrades</span>
</p>
The CSS
.upsell {
background: none repeat scroll 0px 0px #FAFAFA;
border-top: 2px dashed #E8E8E8;
color: #666;
display: block;
font-size: 11.5px;
font-weight: 600;
margin: auto 19px 5px;
padding: 8px 0px 8px 8px;
position: relative;
text-transform: none;
white-space: nowrap;
width: 560px;
}
.upsell .price-difference {
color: #0C82C4;
font-size: 15px;
font-weight: 700;
margin-left: 5px;
display: inline-block;
}
.stateroom .upsell .price-difference::after {
content: "";
display: block;
}
.upsell .ccButtonNew {
position: absolute;
right: 10px;
top: 17px;
}
The p element has white-space: nowrap set on it, but when I turn it off, the problem doesn't go away.
I think it's related to the following link, but my situation isn't the same. In that question, the asker put a block level element div inside a p, which only takes inline elements. I have an inline element, span, inside the p. This should work.
:after pseudo-element working in FF, but not Safari or Chrome
.stateroom .upsell .price-difference:after {
content: "";
display: block;
position: absolute;
width: 30px;
border-top: 1px solid #000; /* placeholder border */
}
try adding a position to the after's css rules. i had a similar situation in which the after pseudo wouldn't display in old versions of safari but worked properly in all other browsers. I fixed adding a position rule to the css.
Hope this hepls.
I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.
Edit: it seems to be working fine on Firefox 37.
The answer below is still relevant, but the style related issues from mid 2013 are resolved.
IE support isn't mentioned here but edits/answers regarding it are welcome.
demo
The HTML:
<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>
The CSS:
input[type=checkbox] {
appearance: none;
background: transparent;
position: relative;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
left: 0;
content: '';
text-align: center;
background: #aaa;
display: block;
pointer-events: none;
opacity: 1;
color: black;
border: 3px solid black;
}
input[type=checkbox] + label {
line-height: 48px;
margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
content: '';
background: #32cd32;
opacity: .3;
}
input[type=checkbox]:checked::after {
content: '\2713';
background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
width: 48px;
height: 48px;
font-size: 46px;
line-height: 48px;
vertical-align: middle;
border-radius: 50%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.
What do I need to change to have it look the same on Firefox as it does on Chrome?
Desired:
Not desired:
You can enable custom styles for checkbox specifically for mozilla browser by adding this property and it worked for me.
-moz-appearance:initial
I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from
input[type=checkbox]::after
to
input[type=checkbox] + label::after
Downside:
requires a label
But:
HTML requires input elements to have a label
Conclusion:
only bad for invalid HTML
doesnt technically need a LABEL, but does need control over the mark up to ensure there is a target-able sibling immediately after the checkbox.
i.e.
input[type=checkbox] + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
input[type=checkbox]:checked + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
<input type="checkbox"></input>
<span class="targetMe"></span>
target the span using the sibling selector and :after elements as above.
Might as well put in a label tho at this point... :P
The problem is that :after and ::after technically create an element as the last child of the element the pseudoselector is applied to. Firefox doesn't like to create children inside of its checkboxes. This is actually part of a bigger topic which is replaced elements.
You will see the same issue with the :before and ::before pseudoelements not working on checkboxes because they would create elements as a first child element within the element being selected.
on my website, I got a couple of images linking to various services. Today, I wanted to add the service-name under the image. The name is already in the title-attribute of the anchor-tag, so I thought this should be easy. I tried it like this:
a[title]:after{
content:"\A" attr(title);
font-size:10px;
text-decoration: underline;
}
The problem with that: The linebreak is ignored, the text is displayed inline. Is there any solution?
You can either use display: block to force the line-break, but this seems to require that the parent a is also display: block
a {
display: block;
}
a[title]:after{
display: block;
content: attr(title);
font-size:10px;
text-decoration: underline;
}
...or, you can use position: absolute;, though this means adding CSS to your a style definitions as well:
a: {
position: relative;
/* ...everything else...*/
}
a[title]:after{
position: absolute;
top: 1em; /* assuming your 'a' font-size is 1em, with no line-height/padding, adjust to taste */
left: 0; /* assuming you want it aligned with the left-hand side of the parent 'a' */
content: attr(title);
font-size:10px;
text-decoration: underline;
}
Demo added to JS Bin