I have a code snippet:
<fieldset class="shareMe"><br />
<input type="checkbox" id="share_me" name="share_me" value="1" {if $default_share_pref}checked="checked"{/if} onclick="if (this.checked) { var perms = 'publish_stream'; fb_login_cached(function(response){ if (!response.perms.match(new RegExp(perms))) $('share_me').checked = false; }, perms); }"/>
<label for="share_me">Post this question to my friends on
<span class="">
<a class="fb_button fb_button_small">
<span class="fb_button_text">Facebook</span>
</a>
</span>.
</label>
</fieldset>
I want to change the text in <label for .. > field via CSS.
I know i can do it by placing duplicate copy of this snippet and use css to toggle. However, i want to do it minimum code change. May be using some CSS trick to change <label for..> text and not affecting the code inside <label for...> at all.
You can't change text with CSS. The exception to this rule is the ::before and ::after psuedo-elements. In theory you could use classes to toggle the text like so:
label[for="share_me"]:before{content:'Post this question to my friends on '}
label[for="share_me"].othertext:before{content:'Some other text!'}
However, just because you can doesn't mean you should. It's an accessibility nightmare, and can you imagine coming back later and trying to work out where the text is coming from if not from the HTML?
Following the example at https://blog.escapecreative.com/how-to-replace-text-with-css/, this is what worked for me:
label[for="donate-choice-14724"]{
visibility: hidden;
position: relative;
}
label[for="donate-choice-14724"]:after{
visibility: visible;
position: absolute;
top: 0;
left: 0;
content:'Make this donation monthly';
}
You can only change the content of :before and :after pseudoelements with CSS. Ali Bassam's answer below shows a 'hacky' way to display the pseudoelements content over the parent so that you can control it. Problems with this solution include, well, how hacky it seems and also the limited IE support of pseudo elements. But that might not be problematic for your project.
Another thing to consider is that you'd have limited control over the toggle with CSS. Your two options are media queries and the familiar pseudo classes. If your toggling needs go beyond what those guys can do, you'd do best turning to Javascript.
Related
How to create a css selctor for a checkbox with :: before selector. I want to create css selector of a radio button .
I am using the selector for eg: [data-model-cid="c279"]>label in firepath and it shows me the element.However in the test script its unable to get the element.In google console when I try to get the element by $('[data-model-cid="c279"]>label') it is unable to fetch the element.So I think the :: before selector needs to be added in the selector to search the element. The Html is given below.How to write a selector with the :: before ?
<div class="radio" data-model-cid="c279">
:: before
<input id="pac-item-care-plan-4 years-45924345-view261" class="js-care-plan-update" type="radio" value="45924345" name="pac-item-care-plan-view261" data-analytics-id="cpradio" data-groupid="472AB3B8BDAD4A4AA78A7CF484FFA7E4" data-offerid="F259143E766145DF8F50DF46F9EC10B7" data-action="add" checked="checked"/>
<label class="no-wrap" for="pac-item-care-plan-4 years-45924345-view261">
:: before
4 years
<strong>(+ $39)</strong>
</label>
</div>
From what I know you cannot do this, mainly because an input is an empty tag (self-closing) and it basically has no content.
within a <div> element if you look at the following example
<style>
.my-div::before {
content: 'before';
}
.my-div::after {
content: 'after';
}
</style>
<div class="my-div"></div>
You'll notice in the chrome devtools you'll get something like this
<div class="my-class">
::before
::after
</div>
This is possible because the ::before and ::after psuedo-elements live inside the div tag, if you add another child div with a height and a background you'll see the words before pop up above the child div and after pop up after the child div - this is because they are basically children but inserted in a different way (through CSS).
The following is what you're looking for the browser to do
<input type="radio"></input>
to
<input type="radio">
::before
::after
</input>
But this is wrong already since the input tag shouldn't have any content in it. Most browsers will probably ignore this or even try to fix your markup for you but you simply won't be able to get this working.
From the documentation on MDN
"The :before and :after pseudo-elements elements interact with other
boxes... as if they were real elements inserted just inside their
associated element."
A correct <input> tag looks like this:
<input type="radio" />
And since this doesn't have any room to place the ::before and ::after in it won't work. You'll have to find an alternative solution unfortunately.
I have two texts with different lengths and I'd like to display only one of them (in this case 'come') but preserving as much space as the length of the longer one ('will come') so that I can switch them without changing the sentence width.
Is it possible only with css?
I promise I come to see you in the hospital.
I promise I will come to see you in the hospital.
Yes, it is possible with pure CSS.
You will want to wrap both potential options each in <span> element, and then both of those should in turn be wrapped in another <span>.
You can set each of the child span elements to be display: block; so that they sit on top of each other, and then you can show and hide one or the other by setting height: 0; and overflow: hidden;. This completely hides that one element, but allows it's width to still contribute to the size of the parent.. thus, the parent will be as large as the longest of the two options.
Then, the outer <span> just needs to be display: inline-block; and vertical-align: bottom; to stay in line with the text.
Add some extra styles for prettiness and to do the toggle on hover and you should have something like this:
jsFiddle DEMO
I made this in a few mins you can work off it and improve the basic functionality but here is the gist of what i did.
By using span and visibility:hidden rather than display:none it keeps its space even when its not actually visible.
Giving each button, text input and phrase an id that can use a key to identify it you'll be able to have multiple buttons, phrases and text boxes without needing to name every button, text box and phrase within your jquery.
here is the basic html
<p>A random phrase <span id="word1">to</span> test with</p>
<input type="text" id="txt1"/>
<input type="button" id="btn1" key="1" value="test word"/>
<hr>
<p>Another random phrase <span id="word2">that</span> can be tested</p>
<input type="text" id="txt2"/>
<input type="button" id="btn2" key="2" value="test word"/>
<hr>
<p>Some random text <span id="word3">just</span> to create some test</p>
<input type="text" id="txt3"/>
<input type="button" id="btn3" key="3" value="test word"/>
<hr>
basic jquery
$(document).ready(function(){
$("input[type=button]").on("click", function(){
var which = $(this).attr("key");
var correctWord = $("#word" + which).text();
var userWord = $("#txt" + which).val();
if(correctWord == userWord){
$("#word" + which).html(userWord).css({"visibility" : "visible", "color" : "#00cd00"});
$("#txt" + which).css({"border" : "1px solid #00cd00", "outline" : "none"});
}else{
$("#txt" + which).css({"border" : "1px solid #ff0000", "outline" : "none"});
}
});
});
and the small bit of css
p span{
visibility:hidden;
color:black;
}
You will of course be able to see the correct spelling of the word within the source code but im assuming that wont be an issue with the way you asked the question.
here is a jsfiddle showing it in action
Hope this gets you thinking on a way to carry on with your idea.
EDIT here is an updated JSFIDDLE which is more inline with what your thinking of i think.
You can grab the source code from there and play around with it.
Once again hope this helps.
The question I want to ask is, "Is it possible/good practice to refer to a child of an element that is not a direct child?"
For instance, if you have HTML like this:
<form class="formation">
<p>
<span>
<input class="phone input">
</span>
</p>
<p>
<span>
<input class="text input">
</span>
</p>
</form>
And you want to refer in CSS to the inputs only in that particular form, so you call the class of the form followed by the class of the inputs without referring to the elements in between, like this:
.formation .input {
width: 10px;
}
will this work properly?
I tend to think I've done this already on projects and it has worked properly but usually I refer to all the children in between (because I don't go that deep). But I'm currently working on a media query for a wordpress site that doesn't seem to be respecting this rule. Is this bad practice? Or is this downright incorrect? Thanks for all your help!
Yes, it is not only possible but also advisable to do so. Choose your selectors for your css rules as lean as needed to reduce dependency on your markup structure. This is not only wise for performance reasons, it also saves you quite some work in case your markup should ever change, e.g. later on you notice the span is not needed any longer and you remove it to keep your markup as clean as possible. In case you used the full DOM path to your .input you will then also have to adjust your css selectors. Same if for any reason in the future your <p> should become a <div>.
Just make sure you give the rules as much DOM context as necessary to not apply your rules to the same classed element in other contexts (if you have any at all, and if you want to apply a different set of style rules for it).
Yes, it'll work fine. What youv'e got with .form .input allows for any number of intermediate nodes between the two classes.
If you'd had .form > .input, then your CSS wouldn't match at all. > is the "immediate descendant" selector, so
.form .input { color: green }
.form > .input { color: red }
<div class="form">
<div class="input">This is red</div>
<div class="whatever">
<div class="input">This is green</div>
</div>
</div>
A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.
I am using div to layout a webform I am designing and using the   to move text within a div doesnt always produce the result I want as far as the layout of the page.
I started experimenting and by using:
<span style="margin-left:(variable)px"></span>
i am able to move the text exactly where I want it.
My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.
Thank you
* Added Block of code to show what i am trying to accomplish
Complainant's Address
<input type="text" size="50" id="complainantAddress"/>
<span style="margin-left:3px"></span>
City
<input type="text" name="city" maxlength="15" size="15"/>
<span style="margin-left:16px"></span>
State
</div>
Using non breakable spaces for layout/positioning is bad practice.
What you are trying to do with style attributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.
Use CSS attributes margin, padding and text-align for this.
Sample
http://jsfiddle.net/UYUA7/
HTML
Text<br />
Text <!-- Do NOT use this -->
<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>
CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.indent {
margin-left: 20px;
}
What you're doing is actually a better way to do spacing, than relying on  s. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)
The only other thing that I would recommend is to read through this CSS manual:
http://www.w3schools.com/css/css_intro.asp
This will help you continue to learn about position with css.
UPDATE:
This is what your code can look like:
CSS - Use it in the header
<style type="text/css">
#complainantAddress {
margin-right: 3px;
}
#city {
margin-right: 16px;
}
</style>
HTML
Complainant's Address: <input type="text" size="50" id="complainantAddress"/>
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>
Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.
So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.
I have an alerting system that sends out alerts by email. I would like to include diagnostic information but only make it visible if the end user clicks a [+] button.
Is this possible to do in email? Can I do it without using Javascript and only CSS?
If it helps, most of my clients use Outlook, iPhones, or Blackberries
Most likely, not. JS has been disabled in a lot of clients, due to viruses and stuff.
A workaround might be to include a URL to the full error-page with all details, and edit your mail to only summarize the diagnostic information.
Also, you could try to see if you can use :hover CSS, to show the element with some nasty selectors... CSS3-style? http://www.campaignmonitor.com/css/
You can do this with a checkbox, but I don't know if it is cross email client compatible. I would thoroughly check it. Here's some more information:
Reveal and hide a div on checkbox condition with css
There are tonnes of other examples throughout the web. Here is a really good working example on Litmus which uses a Hamburger Menu:
https://litmus.com/community/discussions/999-hamburger-in-email
Here's the simplified version:
<style>
#hidden-checkbox:checked + div #menu{
... css to display menu ...
}
</style>
<input id="hidden-checkbox" type="checkbox">
<div>
<label for="hidden-checkbox">Hamburger Button</label>
<div id="menu">Menu Content...</div>
</div>
Based on https://stackoverflow.com/a/31743982/2075630 by Eoin, but using classes to avoid the use of IDs for this.
Edit. For me it works for standalone HTML files, but not in Emails; In Thunderbird, the checkbox is not changeable, and in Gmail <style> tags are stripped before displaying the email and applied statically as inline style attributes. The latter probably means, that there is no way to make it work for Gmail recipients, for Thunderbird I am not sure.
Minimal example
<style>
.foldingcheckbox:not(:checked) + * { display: none }
</style>
<input type="checkbox" class="foldingcheckbox" checked/>
<div class=>Foldable contents</div>
.foldingcheckbox:not(:checked) selects all unchecked checkboxes with class foldingcheckbox.
.foldingcheckbox:not(:checked) + * selects any element directly after such a checkbox.
.foldingcheckbox:not(:checked) + * { display: none } hides those elements.
The attribute checked makes it so, that the default state of the checkbox is to be checked. When omitted, the default state is for the checkbox not to be checked. The state is preserved when reloading the page at least in this simple example.
Larger, visually more appealing, example
In order to demonstrate how it works for larger examples:
<style>
.foldingcheckbox { float: right; }
.foldingcheckbox:not(:checked) + * { display: none }
h1, h2 { border-bottom: solid black 1pt }
div { border: 1px solid black; border-radius: 5px; padding: 5px }
</style>
<h1>1. Hello there</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
<p>Hello World.</p>
<p>This is a test.</p>
<h2>1.2. Nesting possible!</h2>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
<p>Hello World.</p>
<p>This is a test.</p>
</div>
</div>
<h1>2. More things.</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
<p>This is another test.</p>
<p>This is yet another test.</p>
</div>
I don't think you can, email clients won't allow you to run javascript code due to security issues. And you can't do what you want only using CSS.
you can't respond to click events without js.
you can try an approach using :hover on css, but i'm not sure how many email clients support it