I'm not sure if this is possible but it would help immensely if it is. I'm working on an e-commerce site in the Volusion framework and a lot of text is dynamically generated on Volusion sites. Most of the text is in <span>s or <div>s as normal but every once in a while there is a ":" that is displayed after a category header. You can see it in the below code that I grabbed from a page I'm working on:
<td>
<span class="PageText_L71n">Qty</span>:
<input type="text" class="v65-productdetail-cartqty" name="QTY.WA-SSPURSE" size="3" maxlength="8" onkeydown="javascript:QtyEnabledAddToCart();" value="1">
</td>
You can see the colon after the </span> that is just being displayed but not in any container. Is there any way to target that? I'm trying to put a display:none or visibility:hidden on it since I'm doing quite a bit of custom coding and it's just hanging there right now.
Thanks for the help!
If you know the container of the colon ahead of time, you can change the font color to match the background or use font-size: 0 (which I like because it also removes unnecessary space):
td {
font-size: 0;
}
td * {
font-size: 14px;
}
Obviously adjust for specifics that work for your site in particular.
If all the elements in the td are known, then target all of them with the :after and :before pseudo selectors.
td span:after {
content:"<span class="hide">"; }
td input:before {
content:"</span>"; }
.hide {
display:none; }
I have not tested this nor ever used these selectors but it should work.
If there are multiple elements of the same kind, say three inputs you can use the nth-child selector on td.
Related
I know there are lot's of questions regarding this query here but none of them provide the solution for me.
HTML
<input id="tb1" type="text" class="note" />
<br>
<p class="note1"> This is not done.</p>
CSS
p.note1:before{
content: "Note:";
}
tb1.note:before{
content: "Enter your number";
}
I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag.
EDIT: I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.
EDIT2: Forget about my css, is there any way that placeholder text is possible without using placeholder attribute and just with plain css for input type="text"
:before creates a pseudo-element that is the first child of the element matched.
The selected element MUST be a container tag. An empty tag like <input> doesn't have any children element.
If you can't edit your HTML code manually, you're still able to that by using JavaScript:
document.getElementById("tb1").setAttribute("placeholder", "Enter your number");
Update
If you want to achieve this by using CSS only, you need to have a container element wrapping your <input> (or come after it).
BUT It doesn't work correctly as placeholder do. You'll not able to check the value of <input> by CSS. If you write something inside the <input>, after blur event, the generated placeholder will be displayed over the <input> again.
HTML:
<label>
<input id="tb1" type="text" class="note">
</label>
CSS:
label {
position: relative;
}
label:after {
content: 'Enter your number';
position: absolute;
left: 5px;
top: 0;
color: #bbb;
}
#tb1 {
position: relative;
}
#tb1:focus {
z-index: 10;
}
JSBin Demo
It doesn't work for the simple fact that this:
<input id="tb1" type="text" class="note"></input>
is not valid. <input /> elements are not containers. As the spec notes, endtags are forbidden (and essentially ignored by the browser): http://www.w3.org/TR/html401/interact/forms.html#h-17.4
If you cant manipulate the html and use placeholder="". Use javascript to manipulate the placeholder. Every css approach is hack-isch anyway.
E.g. with jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');
I have found this method but not supported by all browsers:
#tb1.note:empty:before{
content: "Enter your number";
}
Note: you have forgot to place an id selector # tb1.note
see this link
EDIT:
Try this for starters: (Note: you'll need some js to detect if text has been entered in the input)
Apart from this - I don't think this there is a css solution for placeholder text on an input element without using the placeholder attribute.
FIDDLE
Markup
<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>
css
.container
{
position: relative;
}
input
{
background: transparent;
}
input:focus + .fakePlaceholder
{
display: none;
}
.fakePlaceholder
{
color:gray;
position:absolute;
top: 3px;
left: 5px;
z-index: -1;
}
You can't use pseudo elements on an input tag - or any other non-container elements for that matter
From the Pseudo-Elements tag info:
you cannot use them (pseudo elements) with replaced elements (see
below) which do not have actual content. This is because the generated
content resides within the element.
...
Replaced Elements
Any element whose appearance and/or dimensions are determined by some
external resource is considered to be a replaced element. Some
pseudo-elements cannot be applied to replaced elements because they
have no "content" or get replaced with something (such as user
interface controls). Replaced elements include images (<img>), inline
frames (<iframe>), line breaks (<br>), horizontal rules (<hr>),
plugins (<object>), form elements (<button>, <textarea>, <input>, and
<select>), videos (<video>), audio sounds (<audio>), and canvases
(<canvas>). Any other element is considered to be a non-replaced
element.
Another way this can be accomplished, and have not really seen any others give it as an option, is to instead use an anchor as a container around your input and label, and handle the removal of the label via some color trickory, the #hashtag, and the css a:visited. (jsfiddle at the bottom)
Your HTML would look like this:
<a id="Trickory" href="#OnlyHappensOnce">
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
</a>
And your CSS, something like this:
html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */
a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */
a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */
a#Trickory input {
width:95%;
z-index:3;
position:relative;
background-color:transparent;
}
a#Trickory label {
position:absolute;
display:block;
top:3px;
left:4px;
z-index:1;
}
You can see this working over at jsfiddle, note that this solution only allows the user to select the field once, before it removes the label for good. Maybe not the solution you want, but definitely an available solution out there that I have not seen others mention. If you want to experiment multiple times, just change your #hashtag to a new 'non-visited' tag.
http://jsfiddle.net/childerskc/M6R7K/
I have phrase as Client Testimonial and i want to change only the Client i have used only first-letter but is there any method in css to change color .. no javascript please.
How about using :before?
I would change the text from "Client Testimonial" to "Testimonial", and then with CSS apply the :before rule:
HTML:
<div class="word">Testimonial</div>
CSS:
.word {
color: black;
}
.word:before {
color: red;
content: "Client ";
}
Example: http://jsfiddle.net/LvZt7/
As noted by others, there is (unfortunately*) no :first-word pseudo-selector available in CSS (even version 3 or 4, so far as I currently know). However, there are two possibilities that exist without JavaScript, though both have their failings.
The first, and easiest, is to simply wrap the first word in a span:
<p><span>Client</span> Testimonial</p>
And style the span with the highlight:
p span {
color: #f90;
}
JS Fiddle demo.
While this approach does require adding an extra, in this case, span element for styling purposes it is simple to implement, and works reliably cross-browser.
The second is slightly more fragile, though avoids adding the extraneous span tag, but requires, instead, that you add an attribute:
<p data-highlightword="Client">Client Testimonial</p>
With the following CSS:
p[data-highlightword] {
position: relative;
}
p[data-highlightword]::before {
content: attr(data-highlightword);
color: #f90;
position: absolute;
top: 0;
left: 0;
}
JS Fiddle demo.
This approach relies on the addition of a single attribute to a single element, but does require extra CSS and will only work in compliant browsers. Which is almost all of them, now, with only IE 8, or perhaps 9, and below proving problematic.
<p><span style="color: #c0ff33;">Client</span> Testimonial</p>
so yes, just style it with <span></span> its perfect for that kind of situations.
Edit:
This edit is not directed for the post author but for someone just learning to use css: based on "best practises" one should consider using separate .css file for setting styles in a manner like:
.client {
color: #c0ff33;
}
and using it like:
<p><span class="client">Client</span> Testimonial</p>
If you want to specify more and be certain that you only use your span style inside <p></p> you could also introduce it like:
p span.client {
color: #c0ff33;
}
Fiddle: http://jsfiddle.net/LvZt7/97/
You could also do it other way around specifying your p class and not span:
<p class="client"><span>Client</span> Testimonial</p>
and
p.client span {
color: #c0ff33;
}
or just specifying all p span html markings to have text inside span with color #c0ff33:
<p><span>Client</span> Testimonial</p>
and
p span {
color: #c0ff33;
}
You could wrap the word in a span and style it instead. As Henrik Ammer stated in a comment, there is no :first-word.
i'd recommend doing something like this:
<span class = "redcolor">Client </span> Testimonial
CSS:
.redcolor
{
color: red
}
That way if you want anything in red, just give it a div/span with that class
I'm in the process in coding a web design and i've spent the grandeur of my time thinking how will i be coding this navigation bar, where the <li> have dynamic widths where the background image adjusts to the width of the element.
My idea was to use <span> and slice the background image into three parts.
<li>
<span class="libefore"></span>
MOVIES
<span class="liafter"></span>
</li>
What's the best way of coding this?
Normally this is achieved with a technique called 'sliding doors' have a read over this:
http://www.alistapart.com/articles/slidingdoors/
If you are willing to go with CSS 2.1 :before and :after selectors (See here for supported browsers: http://www.quirksmode.org/css/contents.html), you could try something like this:
HTML:
<li>
Movies
</li>
CSS:
li:before {
background-color: #F00;
content: '\00A0\00A0';
}
li a {
background-color: #0F0;
text-transform: uppercase;
}
li:after {
background-color: #00F;
content: '\00A0\00A0';
}
This keeps your HTML clean without introducing any presentational elements. (ie. No span elements that have no content or hierarchical purpose) Also, it's not a bad practice to use text-transform to take care of any uppercase transformations, just in case you want to change the style one day without having to modify the content.
Here is a fiddle which should give a bit of a starting point to tweak from: http://jsfiddle.net/6Keaa/
Hope this sets you in the right direction...
I have several paragraphs that I would like to indent, although only the first lines of these paragraphs.
How would I target just the first lines using CSS or HTML?
Use the text-indent property.
p {
text-indent: 30px;
}
jsFiddle.
In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles.
p:first-line {
color:red;
}
p {
text-indent:40px;
}
http://jsfiddle.net/Madmartigan/d4aCA/1/
Very simple using css:
p {
text-indent:10px;
}
Will create an indentation of 10 pixels in every paragraph.
Others have mentioned the best way to implement this via CSS, however if you need a quick fix with inline formatting, simply use the following code:
<p style="text-indent: 40px">This text is indented.</p>
Source: https://www.computerhope.com/issues/ch001034.htm
I was also having a problem getting the first line of a paragraph (only the first line) to indent and was trying the following code:
p::first-line { text-indent: 30px; }
This did not work. So, I created a class in my CSS and used it in my html as follows:
in CSS:
.indent { text-indent: 30px; }
in html:
<p class="indent"> paragraph text </p>
This worked like a charm. I still don't know why the first code example did not work and I did make sure that the text was not aligned.
Here you go:
p:first-line {
text-indent:30px;
}
Didn't see a clear answer for a CSS newbie, so here's an easy one.
first indent all lines (1), than outdent the first line (2)
padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
I ran into the same issue only I had multiple <p> tags I had to work with. Using the "text-indent" property wanted to indent ALL of the <p> tags and that's not what I wanted.
I wanted to add a fancy quote image to a list of testimonials, with the css background based image at the very beginning of each quote and the text sitting to the right of the image. Since text-indent was causing all subsequent paragraphs to indent, not just the very first paragraph, I had to do a bit of a workaround. The same method applies if you aren't looking to do an image though.
I accomplished this by first adding an empty div to the beginning of the paragraph I wanted indented. Next I applied a small width and height to it to create the invisible box and finally applied a left float to make it flow inline with the text. If you are using this for an image, make sure to add a margin to the right or make your width a bit wider for some white space.
Here's an example with the CSS inline. You can easily just create a class and add it to your CSS file:
<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
I'm experimenting with some styles on <textarea>s and I tried doing some stuff with ::before and ::after selectors and I couldn't to anything to get them to work. So the question is: is this possible? I know the CSS surrounding forms is arcane beyond mention but it seems like this should work.
The :before and :after will not work on a text-area (nor any element that cannot contain another element, such as img or input), because the generated content of the pseudo-element gets placed within the element but before or after that element's content, and acts itself as an element. The pseudo-element does not get placed before or after the parent element itself (contrary to some information one may find on the internet). To illustrate:
If you have this css:
p:before {content: 'before--'}
p:after {content: '--after'}
Then html like this:
<p>Original Content</p>
Effectively renders to the screen as if the source code were:
<p>before--Original Content--after</p>
Not as if the source code were:
before--<p>Original Content</p>--after
Which is why tags that cannot contain any html element "content" (like those mentioned above) do not recognize the pseudo-elements, as there is no "place" for that content to be generated to. The textarea can contain "content," but only pure text content.
<div class='tx-div-before'></div>
use this before textarea and
<div class='tx-div-after'></div>
use this code after textarea. and add before and after psedu element.
Actually, you can add content with :after on an input element. This will add a sort of tip when the element is in its active state:
#gallery_name {
position:relative;
}
#gallery_name:focus:after {
content: "Max Characters: 30";
color: #FFF;
position: absolute;
right: -150px;
top:0px;
}
<input id="gallery_name" type="text" name="gallery_name" placeholder="Gallery Name">