Arent there any CSS stylings for textarea in CSS bootstrap?
<input type="text" > has various classes that can be applied to it, but nothing for textarea?
You can give it a class of .form-control in a form which gives it the 'bootstrap' look like other inputs.
Example:
<textarea class='form-control'>Test</textarea>
You can however still add some classes to the parent div:
has-warning
has-error
has-success
Most styling classes you can give an input's parent, you can give to a textarea's. However, classes applied to textarea's parents like has-feedback will have varied results.
Example: bootply
Related
I am trying to style an HTML element inside the component from the Fluent UI React library.
What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the component is translated into:
<div>
<label></label>
<div id="target-me">
<button>
<span></span>
</button>
<label></label>
</div>
</div>
I want to add an inline-flex to the target-me div and set flex-flow property to row-reverse in order to get the button element to the right of the label element. The problem is, I can't manage to target the "target-me" div in my code.
How can I achieve this without rewriting a custom component ?
Thanks!
Ok, well I found the answer to my own question so here it is:
<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />
Essentially you can target different parts of the component (root, container, label..) by using the styles property. Use VS Code's Intellisense to find out what elements you can target inside the component and then just give it some regular CSS-in-JS that you want.
Here's my HTML setup:
<div class="form-item">
<input type="checkbox" id="my-check">
</div>
<div class="form-item">
<label for="my-check">I'm a checkbox</label>
</div>
Is there any way in all the world of CSS to style that label based on whether or not the checkbox is checked? (Without changing the current HTML structure?)
Unfortunately, you cannot use CSS to style your label based on the state of your checkbox without changing your HTML. As of now, CSS selectors support child selectors and sibling selectors, but no selectors to style the child of one element based on the child of another element. You can find the whole list of CSS element combinators at: http://www.w3.org/TR/css3-selectors/#combinators.
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 working with primefaces on a screen where I used calendar and autocomplete
I got the UI from the designer and started integration, I assigned styles like this
<p:calendar styleClass="xyz" />
the output is
<span id="bla" class="xyz" >
<input type="text" class="some other classes here" />
</span>
so my styles all fail
Now I need to apply styles on input directly instead of the spans
Can you solve it by rearranging your CSS?:
.xyz input {
/* some weird styling here */
}
This is problematic if you rely on Bootstrap CSS for example. Form controls needs the class form-control, but when you add styleClass="form-control" for p:calendar, the surrounding span gets the class instead of the input, which totally messes with the design. I think there should be a inputStyleClass attribute for the p:calendar tag, the same way there is a tableStyleClass tag for p:dataTable.
This worked for me using jQuery to add the form-control class to the input field:
$(".mycalendar input:first-child").addClass("form-control");
p:calendar id="date1" value="#{bean.date1}" styleClass="mycalendar" />
You can use this trick if you are using material design:
:host /deep/ .ui-inputtext{
/* Your Crazy Custom Style*/
}
I know its simple but:
fieldset label.inline
does mean that all labls with the class inline inside an element with the class fieldset will be targeted?
It means that all labels with the class inline inside a fieldset element will be targeted.
Check out fieldsets
.fieldset means class="fieldset"
#fieldset means id="fieldset"
fieldset means <fieldset>
It will select all labels, with a class of inline, inside all fieldsets. DEMO
<fieldset>
<label class="inline">
</label>
<label class="outline">
</label>
</fieldset>
It means that all <label class="inline"> inside <fieldset> will be addressed.
Matches the labels with class "inline" inside all the fieldsets.
This selector means:
Find all the tags 'fieldset'.
Within them find all the tags 'label' having class 'inline'.
Apply styles (or functions, if you use CSS selectors eg. in jQuery to apply functions) to the elements matched in point 2.
selectoracle will explain this and other selectors
Selects any label element with a class attribute that contains the word inline that is a descendant of a fieldset element