I'm using angular 7. And I want a label with red required asteriks when label has required attribute. I wrote app.component.css like below Stackblitz. But it didn't worked. What can be the reason of not working? (Or another way of doing this job?)
app.component.css
label.required::after {
content: " *";
color: red;
}
app.component.html
<label required>Test Content</label>
STACKBLITZ
I want to show result as
Test Content *
label.required is a selector for a label with the class required.
<label class="required">
For a label with an attribute required, it would be label[required].
That is pure CSS, BTW, and has absolutely nothing to do with Angular and TypeScript.
Related
I have Vuetify code which look like this
<v-radio-group v-model="gender" column class="radio-group-full-width">
<v-radio value="Boy">
<template v-slot:label>
<v-textarea
v-model="answer"
v-validate="'required'"
required
:error-messages="
errors.collect('form-create.answer')
"
label="Answer 1"
data-vv-name="answer"
type="text"
></v-textarea>
</template>
</v-radio>
</v-radio-group>
The Problem is that i want to have the text-area in full width, but the label tag which is generated by vuetify template slot blocks this. Do you have any ideas how i could fix this?
What it looks now
What i want
answer worked for me with a slight modification to the braces:
.radio-full-width >>> label {
width: 100%;
}
if I set up a className for certain components like
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use
.Change:hover{
background-color: black; //or any other change on hover
}
nothing is overriden on the hover.
I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?
After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
Working DEMO
Choose any color semantic-ui provide for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button appears like:
You can add inverted props inside Button component that react semantic-ui provide
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
your component appears like:
On hover returns to basic style opposite of inverted
styled components usage with react semantic ui
I recommended you to use styled-components in order to override semantic-ui component style
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Next use your new styled component instead of semantic-ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.
.Change:hover {
background-color: black !importanant;
}
To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.
UPDATE:
Try to remove color='blue' from the template and check if will work with and without !important rule.
I have the following style set for labels of a particular form:
#incidentForm label {
font-weight:bold;
width:40%;
vertical-align:top;
}
Which is exactly what I want for my full page form. But for the modal that allows one to update a single field from a report where someone would view the data results, I would like the label for the TEXTAREA ONLY to NOT be limited to the "width:40%". All other input types should keep the "width:40%".
I've been trying to wrap my brain around how to either do a :NOT exception to the existing label style, or somehow set a separate style based on the class of the modal. I.E.:
.updateModal label(that somehow identifies only textareas) {
width:100%;
}
Here is an example of the structure of the update modal itself:
<div id="Return" class="updateModal">
<div id="incidentForm">
<div class="[name of this incident form type]">
<form class="AjaxForm" action="https://blahblahblah" method="post">
<fieldset id="fs1">
<legend>Edit report field</legend>
<div class="field">
<label for="31">This is the label for this text area field:</label>
<textarea id="31" name="31"></textarea>
</div>
</fieldset>
<input value="Update record" type="submit">
</form>
</div>
</div>
</div>
Please note that the id for the textarea and, thus the label for it, are generated dynamically based on the id field of the database the form information is pulled from. All of the field information is stored in a db so I would not be able to generate a specific style definition based on the id of the specific textarea itself. Or at least not that I can think of.
Does anyone have any suggestions?
Thank you very much!
The selector should be like
label[for=xxx]
{
/* ...definitions here... */
}
For multiple, you can make your selector simpler and generalize for modern browsers:
label[for^="3"] {
color: red; //It will apply to all label that starts with "3"
}
Or Simply you can write:
label[for="31"],label[for="32"],label[for="and so on.."] {
color: red;
}
Or For General Label Simply write
label {
color: red; //It will affect to all the label in the page
}
With CSS, the subject of the selector is the last compound selector of the entire selector (https://www.w3.org/TR/selectors4/#subject). In CSS4, there is a new subject selector that will allow this. It looks like: label! + textarea. The ! means that the label selector is the subject of this selector.
Unfortunately, this is not yet implemented in any browsers (http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/). Given that, we only have the ability to look for descendants, children, and younger siblings.
If you have some ability to control your HTML, this gives us a possibility: if we flip the DOM order of the form element and label, then the label becomes the younger sibling of the textarea. This gives us the option of using the adjacent + selector. The visual ordering can be altered by using a reverse-column flexbox. Consider:
<div class="field">
<textarea id="f1">My textarea</textarea>
<label for="f1">My Label</label>
</div>
<div class="field">
<input type="text">
<label for="f1">My Label</label>
</div>
.field {
display: flex;
flex-direction: column-reverse;
margin: 1em;
}
textarea + label {
background: #faa;
}
Demo: https://codepen.io/honzie/pen/weMRam
To summarize: (1) Is it possible in CSS2.1/3? Not with the current HTML. (2) Is it possible with CSS4 (assuming browsers implement it and the spec doesn't change)? Yes, in the future.
Although I don't have any code to work with, if provide some I'll try to include it, it seems to me you should be able to add a CSS class to any label that is being used for a textarea. If backend code is using database info to decide on the element to use for a form field then you can use that logic to add the class, otherwise add it yourself when you write the HTML.
You can use the following to select and attribute of an element:
input[type="text"] {
background-color: yellow;
}
Even if I don't really have hope, I want to style bootstrap input-group-addon in css only when the related input is focused. If the input is before the addon, like this:
<input class="form-control" type="email" placeholder="Enter email">
<div class="input-group-addon">#</div>
No problem, a simple :
input:focus + .input-group-addon {
background: $color;
color: white;
}
But assumed it can be placed after as well, if someone has a css based solution in this case, it would be wonderful.
You can't do that using pure CSS but using JQuery you can add these few simple lines to your code:
$( ".form-control" ).focus(function() {
$(this).prev('.input-group-addon').removeClass().addClass('input-group-addon-focus');
$(this).next('.input-group-addon').removeClass().addClass('input-group-addon-focus');
});
$( ".form-control" ).focusout(function() {
$(this).prev('.input-group-addon-focus').removeClass().addClass('input-group-addon');
$(this).next('.input-group-addon-focus').removeClass().addClass('input-group-addon');
});
If your "addon" not placed before or after Control EXACTLY, you can wrap control and addon in a wrapper and modify code using
.parent('.wrapperClass').children('.input-group-addon')
The complete code: JSFiddle Sample
Strange one,
im trying to apply a style to a textbox that is already using jquery autocomplete, the style im trying to apply doe not work, any ideas?
CSS
#LongTextbox {
width: 250px;
}
HTML
<input name="ItemEntry_item_${id}" type="text" value="${item}" id="ItemEntry_item_${id}" class="LongTextBox"/>
Debug shows
<input name="ItemEntry_item_1" type="text" value="" id="ItemEntry_item_1" class="LongTextBox ui-autocomplete-input" autocomplete="off">
CSS debug shows no sign of LongTextBox being consumed
Your HTML has a class of LongTextBox (capital B) whereas your CSS is targeting an id of LongTextbox (lowercase b).
change CSS to .LongTextBox instead of #LongTextbox
fiddle: http://jsfiddle.net/6Wgxc/
Change your CSS as below. In CSS class is denoted with . and id is denoted by #, further in your CSS code the class name LongTextBox is mentioned as LongTextbox
CSS
.LongTextBox {
width: 250px;
}