I'm looking to have a placeholder text like this:
<input type="text" placeholder="Name: *" />
But I'm trying to figure out how to get the * to be a different color. There are many solutions on here that don't work in modern browsers anymore.
You can create a dummy placeholder with input value and on focus/blur just hide/show respectively the placeholder.
Related
I already found threads about this topic like these:
How to hide <label for=""> CSS
How to select label for="XYZ" in CSS?
So I thought it's going to be easy, but for now I had no success.
The label I try to reach is this one:
Inside of code snippets I tried the following:
label[for=payment_method_angelleye_ppcp]
.label[for=payment_method_angelleye_ppcp]
label[for="payment_method_angelleye_ppcp"]
.label[for="payment_method_angelleye_ppcp"]
After a couple of Google sessions, I wasn't able to find any other way of writing. It also seems that you don't set a "." in front of it for this case, but I also tried it, of course.
I believe label[for="name"] is the correct format in general...
But it seems something is missing. Inside the label there is a text and an image, but I don't assume that this plays a role in selecting the label?
I put one in CSS and 1 in javascript
document.querySelector('label[for="ABC"]').style.color = 'blue';
label[for="XYZ"] {
color: red
}
<label for="XYZ">XYZ: </label>
<input id="XYZ">
<label for="ABC">XYZ: </label>
<input id="ABC">
Pierre's answer is good, I just want to clarify that label is an HTML element. Unless you have a CSS class "label", you would not be adding a period in front of the selector in CSS.
You're correct, the content (images and text) inside of a label will not affect the selector we're trying to use but there may be other CSS interfering with what you're trying to do.
Making a form with Material-ui + react. Is there a way to layout the labels to the side of input fields? It's much more readable.
so like this:
name [input]
title [input]
rather than
name
[input]
title
[input]
I can only find fields that have the label and input area mashed together in one.
I could build my own component or a grid, but it seems this is an obvious layout that should exist.
docs page
https://material-ui.com/components/text-fields/
I got the same issue, the only way I've found to solve the problem was by using "sx" which allows you to override the CSS.
<InputLabel htmlFor="login" sx={{display: 'inline'}}>Login :</InputLabel>
<Input id="login" type="text" value={login} onInput={ e=>setLogin(e.target.value)} />
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'm trying to create a very basic chat system, part of which will be the entry box for lines of chat. If the user is logged in, that's all I need; but if the user is not logged in, I want an additional text box to allow them to enter their name.
I have the following HTML (although of course it can be altered):
<form>
<input type="text" placeholder="Name?" name="name" id="name"> <!-- This line may be absent -->
<input type="text" placeholder="What do you want to say?" name="say" id="say">
</form>
Is it possible to style this with CSS so that #name and #say together fill the whole width of the form, with #say taking all the width if #name is absent?
(The backend is Ruby on Rails; I have javascript available, so can use a JS solution, but would prefer pure CSS if possible)
For a simple, all-CSS solution, try the first-child pseudo-selector to overide a default half-width when #say is the first element inside of the form:
#name, #say{width:100px}
#say:first-child{width:200px}
This works perfectly fine with your simple markup structure. (I've tested it)
With whichever of the two languages you'll be using to determine whether the user is logged in, create a conditional statement that adds a html class to the input field that alters it's width say .input-full and .input-partial
IF user is logged in
SET class to input-full
ELSE
SET class to input-partial
ENDIF
sorry for the psedo code, then have appropriate CSS for each.
oooh, didn't see the CSS only, sorry. Without CSS3 and a disregard for IE I don't think you can do this with straight CSS.