Is there any way to write a CSS selector for this snippet, but without it applying to the <label> compoenent? So that I can alter the text in the div, but the label is good where it is.
<div id="edit-cc" class="form-item form-type-item">
<label class="field" for="edit-cc">cc </label>
guy#example.com, frank#example.com, inne#example.com, jan#example.com, karel#example.com
</div>
the best way is to enclose all email address in one element (probably an unordered list is the most suitable tag for this purpose) but if you cannot modify the code just apply your rules to the div {} and then revert them on div label {}
May be you can override those properties which is inside your div like this:
div{
color:green;
font-weight:bold;
font-size:14px;
}
div label{
color:red;
font-weight:normal;
font-size:18px;
}
http://jsfiddle.net/3Kkvg/
Related
I have some nested elements that I need to apply styles in a project that uses Vue.js and Element-UI.
<div slot="left">
<ul class="other">
<li class="disabledText">
<el-input v-model="data.other" type="textarea" :autosize="{ minRows: 4}" :maxlength="3999" :disabled="disSendButton" #change="updateSite('other', data.other)" #blur="data.other=$event.target.value.trim()" />
</li>
</ul>
</div>
In this instance I will be dynamically applying the class "disabledText" to the li element to color the text in the nested textarea, however I am unable to get the rule in the disabledText class to apply to the text area.
The CSS that I have tried:
.disabledText textarea{
color:red !important;
{
li.disabledText textarea{
color:red !important;
{
ul.other li.disabledText textarea{
color:red !important;
{
Even applying a class name directly to the textarea element and referencing that in the CSS class does not have any effect.
The rendered HTML looks like:
HTML
Maybe something like that is gonna work:
.disabledText .el-textarea
or
.disabledText .el-textarea .el-textarea__inner
Although it's kinda hard to solve this problem without any reproduction. Could you provide an example in CodeSandbox?
Suppose to have:
<div class="home">
<input type="checkbox"/>....
</div>
I need to insert margin-left:3px to checkbox. My css code is:
.home+input[type=checkbox]{
margin-left:3px;
}
Anyone can help me^
.home input[type="checkbox"]{
margin-left:3px;
}
<div class="home">
<input type="checkbox"/>....
</div>
You don't need the plus really... unless you have a specific need, and you need quotes around checkbox..!
You almost had it, you just need to wrap checkbox inside quotes input[type="checkbox"]
input[type="checkbox"]
{
margin-left:10px;
}
<div class="home">
<input type="checkbox"/>
</div>
Both of the other answers work, but neither of them is accurate.
Although I tend to recommend putting quotes around attribute selectors [type="checkbox"], it will work perfectly fine without quotes [type=checkbox]. Quotes are only necessary if you're including special characters.
The reason your code wasn't working was that the + in your selector matches siblings.
.home+input[type=checkbox]{} would match an input element with the type of checkbox that is placed immediately after an element with a class of home.
<div class="home">....</div>
<input type="checkbox"/>....
Since your input element is nested inside .home, you won't use the sibling selector +
That's why this code will do the trick:
.home input[type=checkbox]{
margin-left:3px;
}
<div class="home">
<input type="checkbox"/>....
</div>
I've been having trouble aligning the terms of service and privacy
policy message under the signup button of my page.
http://jsfiddle.net/jyfvLrb3/
HTML:
<div class="signupterms"> <p>By clicking the sign up button you agree that you read the site's</p> <span>Terms of service</span>Privacy Policy<p>and</p>Cookie use
</div>
CSS:
.signupterms {text-align:left; float:left; display:inline-block;}
.signupterms a {float:left; text-decoration:none; color:#000; }
.signupterms p {float:left; margin-left:4px;}
I've tried floating all the elements left, display:inline-block, but nothing seems to align the words perfectly, especially when resizing the browser window. It's probably something very obvious to fix, but I'm sure you guys can point me in the right direction and help me fix this problem. Thanks!
Your <p> tags have margins which is making the text appear out of line with the anchor tags.
To be honest, I'd just put the links inside the the <p> tag like below and then you don't need to worry about removing the margin from the <p> tags.
.signupterms {text-align:left; float:left; display:inline-block;}
.signupterms a {text-decoration:none; color:#000; }
<div class="signupterms">
<p>
By clicking the sign up button you agree that you read the site's Terms of service Privacy Policy and Cookie use
</p>
</div>
how about using <span> ?
http://jsfiddle.net/jyfvLrb3/1/
<p> is a block element with some predefined styles, therefore its much better to use some inline without any properties, like <span>
p tag have a default margin. Remove it by adding margin:0; to p.
.signupterms p {float:left; margin-left:4px; margin:0;}
the <p> tag has display block by default and a margin...
just use one for the first statement and then spans to seperate links like so:
.signupterms {
text-align:left;
display:inline-block;
}
.signupterms a {
text-decoration:none;
color:#000;
}
.signupterms span {
margin-left:4px;
display:inline-block;
}
<div class="signupterms">
<p>By clicking the sign up button you agree that you read the site's</p> <span>Terms of service</span>,<span>Privacy Policy</span> and <span>Cookie use</span>
</div>
fiddle
I've got an issue that I'd love to solve by using CSS without resorting to statically sizing my labels (but perhaps it isn't possible).
I have two labels per line, one for displaying a "title" and the other for displaying the associated "value". Here's how I'd like it to look:
This is similar to Align labels in form next to input but I'm wanting the second element per line left-aligned instead of the first one to be right-aligned. I tried modifying the accepted answer from that question and set the width of the "title" label, but that has no effect on my output. As I mentioned above, I'd rather not hard-code a width anyways, but I was hoping to get something working before trying to find a good, long-term solution that can account for larger "title" values.
Here's my current CSS (the classes should be self-explanatory):
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
text-align: left;
}
And my current HTML:
<div>
<div>
<label class="propertyTitle">Hello:</label>
<label class="propertyValue">World</label>
</div>
<div>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyValue">To All of the People in the World</label>
</div>
<div>
<label class="propertyTitle">I Want:</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
The HTML can be modified as well, if that'd make it easier. To conform with best practices, I'd rather not use tables to make this work.
Here's a jsFiddle showing what I have now, what am I missing? Ideally this solution would work for IE8+ and Firefox, so unfortunately HTML5 and CSS3 elements are discouraged.
EDIT
To reiterate after the first two answers came in (that both solve my issue), is there a way to do this without hard-coding a width for my "title" labels?
grouping your divs and labels like so:
<div>
<div class="titleWrap">
<label class="propertyTitle">Hello:</label>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyTitle">I Want:</label>
</div>
<div class="valueWrap">
<label class="propertyValue">World</label>
<label class="propertyValue">To All of the People in the World</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
with the following CSS:
.propertyTitle {
display:block;
text-transform: uppercase;
width: auto;
}
.titleWrap{
display:inline-block;
}
.propertyValue {
display:block;
width:auto;
}
.valueWrap {
display:inline-block;
}
should give you the desired result without having to specify the widths
Check out this jsFiddle
try using display:inline-block on your labels
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
display: inline-block;
}
by default label is an inline element. that's why width property doesn't apply to label.
to apply the width you have to convert the label into a block level element by using display:block.
I hope it clarify the answer.
so you have to use this CSS property in your code.
.propertyTitle {
text-transform: uppercase;
display:inline-block; /*this will make the label a block level element*/
width: 300px;/*Why doesn't this have any effect?*/
}
More modern version is display: inline-flex;
HTML
<!DOCTYPE html>
<html>
<head>
<title>Learning</title>
</head>
<body>
...
<h1>Testing</h1>
<span class="error">* Required</span>
<form name="SignUp" method="post" action="">
<fieldset>
<div>
<label>Name:</label><input id="NAME" type="text" name="name" placeholder="Name" required>
</div>
<div>
<label>Email:</label><input id="EMAIL" type="email" name="email" required>
</div>
<div>
<label></label><input type="submit" value="Send" >
</div>
</fieldset>
</form>
</body>
</html>
CSS
body {
background-color:#b0c4de;
font-family:"Times New Roman";
font-size:15px;
}
p {color:blue;}
.error {color: #FF0000;}
label {
display: inline-block;
width: 150px;
text-align: right;
margin-right:30px; //How far the label element and input box
margin-top:100px;
}
fieldset{
//border:none;
padding:15px;
width:500px;
margin:0px auto;
}
The Name: and input box are on one line and the next line is just touching it.
how do i put them apart.
Add a line-height to the div like below:
div{
line-height: 30px;
}
Fiddle
Note: Here, I have applied the property for div tag in general as it is only an example. In actual case, you might want to add a class for the div tags within the fieldset and apply the line-height only for that class. Doing it that way will make sure other div tags in the page aren't affected.
without getting too complicated, something simple as the following will produce the desired results
#NAME, #EMAIL, input[type=submit] {
margin-top:5px;
}
this gives your input fields a small space above so that they are spread out.
Note: I have used specific selectors to apply these values to the fields in your example only.
add below css to your code
div{
margin-top:10px;
}
you can change margin as your requirement.
There are many ways to implement this.
The simplest way is simply to insert a < BR > between label and the input tag.
A second way is to use a table and place the input in the cell below.
An alternative way is to use for example divs and place the label in one div and the input in another and use css techniques like float etc. This has the advantage of controlling everything via css.