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 */
}
Related
Normally, CSS works by matching element names in the HTML:p.heading1 {} affects all elements of type p with class heading1.
Is there a way to display an object/text that only exists as an attribute?
For example, this is my HTML:
<body var="text I want to insert">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
The title page has a number of <p> children. In addition to them, I want to display the content of body/var on the title page.
You can probably consider CSS variables. The custom property will get inherited by all the elements inside the body and you can use pseudo element to display it where you want:
.titlepage:before {
content:var(--var);
}
<body style="--var:'text I want to insert'">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
</div>
</body>
AH Formatter has an -ah-attr-from() extension function that will let you get the contents of an ancestor's attribute (see https://www.antennahouse.com/product/ahf66/ahf-ext.html#attr-from).
You could use -ah-attr-from() in a rule for .titlepagetext::before.
When you using css, you can't target parent. There is no way to get parent selector. And content: "" can apply only for pseudo-classes.
I was thinking that there's only two ways to focus element - using JavaScript, or in case it's a div with an contenteditable attribute. But this time I tried something different: I tried to effect input[type="text"] within a div (without contenteditable) using the parent.
I know that when a child element is focused, the parent is focused too - I mean, If I have the following example:
<form action="/" method="get">
<input type="text" placeholder="Hi I'm Text!" />
</form>
When I focus on the textbox, the form will be focused too. I can do the following:
form input[type="text"]:focus {
/* CSS goes here */
}
But I can not do something like this:
form:focus > input[type="text"] {
/* The same CSS goes here */
}
I already solved my own problem, but I wonder why it can not work this way. As I said (and feel free to correct me if I'm wrong) - when I focus on the input, I'm automatically focusing the parent element too (and it's own parent element, etc.) So why can't I simply use :focus on the parent, and then effect the child?
You can't focus on a form element. If you want, you can add it the tabindex attribute, such as <form tabindex="0">.
Forms are containers for controls and as such not expected to be getting direct user interaction.
According to W3C, users should interact with forms using controls.
Reference:
https://www.w3.org/TR/html401/interact/forms.html#form-controls
I cannot get this work, looks like not possible, that's why i'm asking...
This is the CSS used:
label.btn {
cursor:pointer;
display:inline-block;
}
label.btn>input[type=checkbox] {
display:none;
}
label.btn>input[type=checkbox]:checked~b {
background:red;
}
/* not relevant, just for testing purpose */
#divtest {
margin-top:1500px
}
Following HTML code will check the input, and then style for <b> tag is applied:
<a href="#divtest" id="anchor">
<label class="btn">
<input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b>
</label>
</a>
DEMO styling
If i add attribute 'for' to the label to target the anchor tag, the default browser scrolling works, but then no more styling applied:
<label class="btn" for="anchor">
DEMO anchor
Now, the obvious question:
Can i get these both behaviours working together in pure CSS?
An input element inside an a violates common sense as well as HTML5 CR. Nesting two interactive elements raises the issue which element is activated on mouse click.
Instead of such construct, use valid and sensible HTML markup. Then please formulate the styling question in terms of desired or expected rendering vs. actual rendering, instead of saying that “this” “does not work”.
This won't work since the Input:checkbox is INSIDE the <label>. Browsers will set focus on the input upon a click on the label.
I have the following html form
<div>
<p>Field1</p>
<input type="text" name="fld_one" id="fld_one" value="" />
</div>
<div>
<p>Field2</p>
<input type="text" name="fld_two" id="fld_two" required value="" />
</div>
I want to use CSS to mark required fields like so
div input[required]:before { color: #f00; content: "*"; }
However this css line does not make a visible change in the document.
For reference I was able to modify all required fields with the following:
div input[required] { background-color: #000; }
TL;DR - Can the :before pseudo-class be used with an attribute selector? If so, how?
:before is a pseudo-element, not a pseudo-class. It can be used with an attribute selector, but you can't use it with input elements with some browsers because it is a replaced element. (Some browsers, because it's not very well-defined whether they're supposed to work, although most lean toward "no".)
The reason why your attribute selector works is because you're applying styles to the input element itself, which works consistently in every browser.
Pseudo elements do not work with input elements, as they have no content.
From the specs:
Authors specify the style and location of generated content with the
:before and :after pseudo-elements. As their names indicate, the
:before and :after pseudo-elements specify the location of content
before and after an element's document tree content. The 'content'
property, in conjunction with these pseudo-elements, specifies what is
inserted.
Input elements have no childNodes in the DOM, hence, no content property to insert into.
As a possible workaround, apply the stars to the labels instead of the input elements
:before is not valid on <input> as it doesn't have "content" - see: CSS content generation before or after 'input' elements for a full explanation.
The "traditional" way of doing it is inserting the * on p or label (label is more semantic).
I spotted this (to me) curious css style in the default Site.css file of an ASP.NET MVC project:
.text-box.multi-line
{
height: 6.5em;
}
Is .text-box.multi-line just the name of a class that happens to have a dot in the middle of it, or is this a nesting of two classes? Or is it something else entirely? Can you explain?
And can you provide a usage example?
Edit
Thanks for all the answers. This seems to be an omission from the w3schools css reference page.
it matches an item with both classes, ie.
<textarea class="text-box multi-line"></textarea>
It will not match if the item only has 1 of the classes.
It will match if the item has those two classes plus additional ones.
It means that the element has both classes.
It will select an element with the class text-box that also has the class multi-line
This would be the same:
.multi-line.text-box {}
.text-box[class~="multi-line"] {}
An example:
<p class="multi-line text-box some-other-class"></p>
It's selecting an element like this:
<* class="text-box multi-line"></*>
Any element that has both the text-box and multi-line classes.
It will select this element:
<textarea class="text-box multi-line" />
Or any element with both the text-box and multi-line classes for that matter.
Here's a quick little fiddle to show the difference:
http://jsfiddle.net/sGn2v/
basically it'll match an element having BOTH classes!