I don't want to use xpath to map these elements, as we can see the class is the same for everyone. How to do please?
<label class="sc-fzowVh juqfMo">CNPJ:*</label>
<label class="sc-fzowVh juqfMo">CPF: (do usuário)*</label>
xpath:
//*[#id="boxCadastro"]/div/div[2]/div[1]/div/label
//*[#id="boxCadastro"]/div/div[2]/div[2]/div/label
See the image please: enter image description here
Without seeing the HTML surrounding each of those label elements in order to be able to use scoping, the only option is to go with text matching on the label contents
element :label1, :css, 'label', text: 'CNPJ:*'
element :label2, :css, 'label', text: 'CPF: (do usuário)*'
or using the :label selector type
element :label1, :label, 'CNPJ:*'
element :label2, :label, 'CPF: (do usuário)*'
although having label elements without for attributes is generally a bad practice and negatively affects page accessibility, so you may want to talk to your developers about improving their HTML
Related
HTML
<label for="email">Email</label>
<input type="text" name="email"></input>
The class attribute of the email input element may change, like if the user enters an invalid email format. I only want that label to change to red when the input it's for gets the class "invalid".
In fact, I want ALL my labels with a for attribute to be "invalid aware" of their assigned input elements.
CSS Attempt:
label[for=*.invalid]{
color: red;
}
The above is probably incorrect because I might have to specify a specific form element by name.
Option 1
If you're adding a dynamic class to the input element (.invalid), why not add a class to the label element, as well? This would simplify the styling of the label when the input fails validation.
Option 2
I understand that changing the label color to red highlights an error to the user. In this option you still highlight an error to the user, but in a slightly different way. The CSS :valid and :invalid pseudo-classes represent form and input elements that validate or fail to validate. These pseudo-classes style the input not the label.
Option 3
This option involves the sibling and attribute selectors. You would have to reverse the order of your label and input in the HTML (but this doesn't have to change the appearance on the screen; see below).
HTML
<input type="text" name="email" class="invalid"></input>
<label for="email">Email</label>
CSS
input[class="invalid"] + label { color: red; }
Changing the visual order of elements with CSS Flexbox
Despite the order of elements in the DOM, you can still change the visual order of elements with CSS Flexbox. So if you didn't want to put the label after the input for the sake of appearance there's an easy workaround: Wrap the input and label in a flexbox and use the order property to arrange their display order.
A few side notes...
HTML5 provides an input type="email", which you may want to consider instead of type="text". One benefit being that when mobile devices see type="email" they often launch an e-mail-friendly keyboard.
Second, the input element is a void element. No closing tag required. You can safely remove the </input>.
Lastly, the for attribute associates a label element with a matching ID. In your code, you would need to add id="email" to your input for the label click feature to work.
The for attribute has to match the id (not the name, not the class) of the associated input.
In order to change the label based on a feature of the input you need to either:
Use combinators to draw a connection between the two elements (which is impossible when the label precedes the input) or
Use JavaScript to modify the label (e.g. by adding a class).
I have this label and checkbox
<label><input type="checkbox" id="SameAsPrimaryAddress" />Same As Primary Address</label>
Is there a CSS selector that will only affect the label text and not the checkbox or do I have to separate my label from the input or give the label an ID or class to be able to do this?
It depends
In that case and if you only need that HTML, you can.
But
It is better to wrap your text with a span or a div to avoid problems you can encounter.
Here's a demo
http://jsfiddle.net/6aS4k/
Then you can add style with label span {}
Your answer: No. There is no selector to only target the free floating text of an element, without affecting the inherited properties of other elements within. To explicitly style your text, you would actually want to wrap your text in another element to target in your CSS, like a span.
However, in your specific case, that checkbox does not have many (if any) inherited properties in most browsers default stylesheet. So, a long as you aren't using a reset stylesheet or otherwise normalizing that input to inherit style properties you could get away with styling the label to affect only the text.
In the end, I would recommend that your label should actually correspond to your input separately, which would also semantically make sense. This would also allow you to make use of the for attribute, which will allow clicking on your label to toggle the corresponding checkbox as well, which is a win for usability!
<div>
<input type="checkbox" id="SameAsPrimaryAddress" />
<label for="SameAsPrimaryAddress">Same As Primary Address</label>
</div>
I have a form element generated by Zend Form as follows:
<dd id="website-element">
<input type="text" class="pre-http" value="bigshop.com.au" id="website" name="website">
</dd>
Is there any way I can precede the input element with the text 'http://', using CSS? (I want the user to enter the web site without the leading 'http://').
Thanks...
Try this:-
Use :before pseudo element
Demo
#website-element:before
{
content:"http://";
}
:before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.
So it needs to be on the parent of the textbox.
Depends: are you wanting the input value to be prefixed with http:// on submission? If so, you'll have to use Javascript for this one.
Otherwise, you could probably use something like this:
.pre-http:before {
content:"http://";
/* any other styles you'd like to apply to the text */
}
Lets say I want to display tool tips for links using the title attribute:
<a class="editcommand" title="Edit" ...>
Is there a way to specify the title text for all elements of the same class using CSS, so I don't have to repeat it within each element?
CSS is only for the content of the style="" attribute, not other HTML tags. This sounds like a job for Javascript. If you're using jQuery here's an example:
$('a').attr('title', 'My universal title');
Unfortunately, no, CSS does not provide that ability. Since title is an HTML attribute (besides the <title> element of course), it's up to the markup structure (DOM) to define it, not the style (CSS).
With JavaScript it's just a matter of attaching the attribute to a set of DOM elements with that class. But again, that's modifying the DOM elements themselves, not their style properties.
Can anyone tell me if it's possible to have a the text in a single label control displayed in more than one style.
e.g. I have a label
I want the the text to appear with the style "english" (which it does), but I want the "th" of the text to be different (bold, different colour, whatever).
So, the question in a nutshell is: Is there a flex equivalent of the following HTML?
<p class="english">bro<span class="highlight">th</span>er</p>
If not, can anyone think of a good workaround, short of having to separate the text into multiple label controls (thus making alignment a bit of a nightmare)?
Thanks to anyone who can help!
Dan
yes, try the following
var la : Label;
la.htmlText = '<TEXTFORMAT LEADING="3"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="14" COLOR="#000000" LETTERSPACING="0" KERNING="1">what ever texst you wish</FONT><FONT FACE="Verdana"SIZE="18" COLOR="#848484" LETTERSPACING="0" KERNING="1">more text here</FONT></P></TEXTFORMAT>';
Yes, it's possible. Take a look at the Label.htmlText documentation in the livedocs which explains how to set markup on a Label control, e.g.
<mx:Label>
<mx:htmlText><![CDATA[This is an example of <b>bold</b> markup]]></mx:htmlText>
<mx:Label/>
The Text.htmlText reference has a full list of the tags supported and gives detail about the Paragraph and Span tags :
Paragraph tag
The <p> tag creates a new paragraph.
The text field must be set to be a multiline text field to use this tag.
The <p> tag supports the following attributes:
align: Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Span tag
The <span> tag is available only for use with CSS text styles.
It supports the following attribute:
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Ultimately, there are quite a few ways to do what you want.