I know that I can do add color, padding... by styling the input. Are there vendor pseudo elements to style the text itself like there are for placeholder? I want to like translateY the text in the input but not using vertical-align or affecting input's height.
I've searched before, and just now searched again, but I don't believe there are any vendor pseudo elements targeting the values of text inputs like there are for placeholder text.
Being able to apply CSS transform properties to text input values is, to the best of my knowledge, not currently possible with CSS only. There may be some way to achieve what you want with JS, but I haven't seen it done before.
This post delves into the issue, offers some creative workarounds, and may provide you with useful guidance: Is there a way to style part of an input field's value?
Related
why ::marker pseudo-element not support all CSS properties like other pseudo-elements?
can anyone explain me in brief.
Found out today that ::marker pseudo-element not support all CSS properties like background, display, etc but "font-size", "color", and "content" properties are working like charm.
The CSS Lists specification explains:
NOTE: It is expected that future specifications will extend this list of properties and relax the restriction on which properties can take effect. However at the moment outside marker box layout is not fully defined, so to avoid future compatibility problems only these properties are allowed.
Because this selector selects marker of a list item. Like the buller for example. That means that it allows you only to customize the bullet, not the list itself. Thats why you cant apply properties like display, because you are effecting the marker itself. This can be helpful
I got a JSF page which has a <rich:tooltip> as well as an arbitrary component with a title attribute.
Those two do neither look, nor act in the same way.
HTML title attribute has rounded corners, a black border, a smaller font and does not show directly on mouseover.
Do you have any idea, how I can achieve a more similar behaviour on both tooltips? I thought of CSS styling via the styleClass option of <rich:tooltip>.
The appearance of #title depends on the browser and OS, you cannot style it with CSS. You can try making the tooltip look the same but on a different computer they might be different anyway.
Question:
I want to create a hyperlink with both text and a leading or trailing icon. This can be accomplished in at least two ways:
With CSS setting a background-image property
By creating a ASP.NET Html helper that generates an anchor tag followed by an image tag.
Are there more?
I'm guessing this is a problem that has been solved a million times, and there might be a best practice. I see negative and positive sides of both approaches, and I'd like some input from you guys.
Metaquestion:
Both here and on programmes.stackexchange I get the warning "your question appears subjective and is likely to be closed". Where do one ask subjective questions nowadays?
Is the icon content? i.e. does it add (not duplicate) meaning to the document?
If so, it is content and should be an <img> element with a suitable alt attribute.
If it decorative? Then CSS is probably more appropriate.
I would give this anchor a padding-left and set image as non-repeating background.
Here is jsfiddle example: http://jsfiddle.net/ZDPnH/
Okay, so this is more of a question that has lots of solutions that are not CSS, but I'm looking for doing this more from a theoretical perspective. I have an application for it, but its not worth coding it out in any other way.
The (Fun) Question
How do you color the text of an element using the text of the element? I have an element, all on it's own, which will contain a hex value for a color, and I want the text to be that color, but I want to do it only using CSS (likely only can be done using CSS 3).
Sample HTML
<div class="color_contents">#0000FF</div>
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
Currently, there is no way to use CSS to access an element's text content, not even with the CSS3 modules available today.
Regarding this:
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
attr() only looks at element attributes (foo="bar"). Since text content isn't an attribute of an HTML element (despite being a member of the corresponding DOM object), you can't query for it using that function.
There isn't a similar function for accessing an element's text content.
You could do something like this. It's a bit hacky, but all CSS
div.color_0000FF:before{
color:#0000FF;
content: "#0000FF";
}
HTML
<div class="color_0000FF"></div>
Example: http://jsfiddle.net/s8vLy/
The content/attr CSS properties can only be used with :before and :after pseudo-elements.
CSS3 will support attr access from other properties, see https://developer.mozilla.org/en/CSS/attr.
However when/if CSS3 attr goes live, you will still not be able to acces the "contents" of a element from CSS, simply because thats not what CSS is designed for.
Bottom line, use javascript :)
I was wondering if there was a way of using HTML for the content of my ASP:Listbox items instead of plain text? The reason I ask is because I'd like to do some extra formatting on each item in the list. Not just font changes, but perhaps icons alongside the text or table rows to divide up each list item.
I'm vaguely aware that there may be a JavaScript solution to this problem, but I'm not having much luck with it, so if anyone can offer any suggestions or pointers that'd be great.
Edit: I should clarify that my target platform is .NET 2.0 and IE6.
Peter, that's very close to what I'm after. I've done this in my .NET app;
itemToAdd.Attributes.Add("style", "padding-left: 20px; background: url(" + image + ".gif) no-repeat left center;");
This works exactly as expected in FF3, but in IE the images are not displayed for some reason. Does anyone know of any issues surrounding the use of the background CSS element in IE?
there is another related stack-overflow question here:
Is there a way to enhance by CSS an HTML <select> and its <option> on IE 6?
From that it seems like you can;t set many of the css selectors for the OPTION element inside a SELECT.
You can set some things like color and background-color in IE6 but not other things like padding (that do work in certain newer browsers).
You can't format items in a listbox. You should design your own listbox.
Maybe you can create an HTML table of items. then you can format as you want.
for selection of items you can add a column with radio or checkboxes.
For ASP.NET a custom control this looks good :
JavaScript ListBox Control
You can use CSS Style attributes for the listitems.
But it looks like it is only possible in Firefox.
Edit: Tested it with IE 6 and it worked.