I'm styling a portal where I cannot change any HTML but CSS and came across the following bit of code and I want to target the first label(Your Name).
<form class="no-tables" name="" action="" method="post">
<div>
<input type="hidden" name="" value="1">
<label>Your Name</label>
<label>Your Age</label>
</div>
</form>
I tried chevron and first-child selectors but none seem to work.
Try using first-of-type:
/* CSS3 */
form.no-tables > div > label:first-of-type {
background: red;
}
/* or with CSS2 */
form.no-tables > div > input + label {
border: 1px solid black;
}
<form class="no-tables" name="" action="" method="post">
<div>
<input type="hidden" name="" value="1">
<label>Your Name</label>
<label>Your Age</label>
</div>
</form>
You can do this by using input + label for CSS2 only.
edit So fcalderan mentioned this already.
input + label {
background-color: blue;
}
<form class="no-tables" name="" action="" method="post">
<div>
<input type="hidden" name="" value="1">
<label>Your Name</label>
<label>Your Age</label>
</div>
</form>
Related
I have just started to learn how to code and I was trying to select the button class to change the color when you hover over it. I managed to make it work by selecting this in css:
.button[type="submit"]:hover {
background-color: grey;
}
But I am wondering why this doesn't work instead:
.button:hover {
background-color: grey;
}
here is my html code:
<form class="my-form">
<div class="form-group">
<label> Name: </label>
<input type="text" name= "name">
</div>
<div class="form-group">
<label> Email: </label>
<input type="text" name= "email">
</div>
<div class="form-group">
<label> Message: </label>
<textarea name= "message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
It works perfectly, You probably faced not closed div's mistake's or something like this...
take a screenshot if you're sure that everything is alright with your code's.
this helps you to find mistaked like i said:
http://help.simplytestable.com/errors/html-validation/end-tag-for-element-x-which-is-not-open/end-tag-for-element-div-which-is-not-open/
.button:hover {
background-color: grey;
}
<form class="my-form">
<div class="form-group">
<label> Name: </label>
<input type="text" name= "name">
</div>
<div class="form-group">
<label> Email: </label>
<input type="text" name= "email">
</div>
<div class="form-group">
<label> Message: </label>
<textarea name= "message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
size of the select field is affecting by a bootstrap file as shown in the screenshot and i'm unable to find out how to solve this problem.
<form>
<div class="form-group">
<label for="name" class="labstyle">Enter Your Name</label>
<input type="text" class="form-control" name="name" size="20"
maxlength="40" placeholder="Enter You Name" required autofocus>
</div>
<div class="form-group">
<label for="sell" class="labstyle">Chose Your Wish:</label>
<select class="form-control" id="sell">
<option value="0" hidden="hidden" disabled="" selected="">Chose Your
Wish</option>
<option value="morning">Good Morning</option>
<option value="night">Good Night</option>
</select>
</div>
<div class="form-group">
<label for="message" class="labstyle">Message</label>
<textarea class="form-control" name="message" rows="3" cols="40"
placeholder="Optional" maxlength="92"></textarea>
</div>
<button type="submit" class="btn" id="btncustom">Create</button>
</form>
Adding the following will calculate correctly the height in this situation.
select.form-control:not([size]):not([multiple]) {
height: auto!important;
}
include this in abc.component.ts
styles: [`
:host /deep/ select.form-control:not([size]):not([multiple]) {
height: auto!important;
padding: 0.375rem 0.75rem;
}`]
Ok, inside your custom select.form-control class, try to decrease the line-height property for something like that:
line-height: 1.0;
or maybe a small value.
Add this class in your custom style sheet (css file).
.form-control{
height:30px;
line-height:30px;
padding:6px;
}
include this on your css it will fix the problem
#sell.form-control{
height: 46px important!;
}
I spent an hour trying to apply my css to Bootstrap input of type text inside a form. Here's my code:
<form>
<div class="form-group">
<input type="text" name="username" value="" id="username" class="form-control" />
</div>
</form>
input [type=text] {
background-color: red !important;
}
The strange thing is that if I remove the [type=text] part, then all is ok.
JSFiddle
You have to remove the space between input and [type=text]:
input[type=text] {
background-color: red !important;
}
<input type="text"/>
<input type="password"/>
Your background spelling is wrong and remove space.
input [type=text] {
barckground-color: red !important;
}
so make sure you type correct.
input[type=text] {
background-color: red !important;
}
hi try this one hope i can help you:
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
<input type="text" name="username" placeholder="input username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<input type="text" name="password" placeholder="input password">
</div>
</form>
I am new to HTML5 so all the help I can get is appreciated. I have three fields (First Name, Last Name and Birth Date) and I am trying to align them together. I would like to align the fields together horizontally and vertically.
Here is my simple code so far:
<html>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
<form>
<label for="firstname">First Name:</label> <input name="firstname" type="text" size="50" autofocus><br>
<label for="lastname"><br>Last Name:</label> <input type="text" name="lastname" size="50" autofocus><br>
<label for="birthdate"><br>Birth Date:</label> <input type="date" name="bdate" size="50"><br>
<form> </body> </html>
Here is the CSS I have:
input[type=text] {
border: 1px solid #D4E2F1;
}
input[type=date] {
border: 1px solid #D4E2F1;
}
input[type=color] {
border: 1px solid #D4E2F1;
}
I would prefer not use tables as I am not trying to display tabular data. I am looking for a efficient and correct way to do this.
Your help would be greatly appreciated.
Thanks.
AJ
Try this:
HTML:
<form class="user-form">
<div class="field">
<label for="firstname">First Name:</label>
<input name="firstname" type="text" size="50" autofocus />
</div>
<div class="field">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" size="50" />
</div>
<div class="field">
<label for="birthdate">Birth Date:</label>
<input type="date" name="bdate" size="50" />
</div>
<form>
CSS:
.user-form { padding:20px; }
.user-form .field { padding: 4px; margin:1px; background: #eee; }
.user-form .field label { display:inline-block; width:120px; margin-left:5px; }
.user-form .field input { display:inline-block; }
jsFiddle: http://jsfiddle.net/VuSX4/
Try this
HTML:
<
div style="display:block; position:relative; width:100(or something)px; height:auto; margin:0px auto 0px;"
>
Put your form markup in here
<
/div>
I looked all over for this answer and found the information at W3C Schools and a bit of trial and error
This validates at http://validator.w3.org/
I have a page with this structure:
<div>
<div id="container">
<div id="content" >
<div class="question buttons clearfix nobg">
<input id="k3" name="k" type="hidden" value="">
<input id="h3" name="h" type="hidden" value="b07e0bc1c3751d34acbef5b8546b29ae">
<input id="s3" name="s" type="hidden" value="eyJwYWdlcGF0aCI6IFswXX0=">
<input type="hidden" name="page" value="0">
<input type="hidden" name="SID" value="1f7d2a9b3b9450ce2dd746bf0005ebe1">
<input type="hidden" name="_terminated_redirect" value="">
<div id="button-fix" class="button-fix" style="text-align:center">
<input type="hidden" name="referer" value="">
<input id="next-submit-button" type="submit" name="submitbutton" value="Submit">
</div>
</div>
</div>
</div>
</div>
I want to align to center using css. What will be style tag for it ?
Please suggest
You need to set a width on your outer DIV (maybe give it an ID of wrapper or similar) and then set it's margins - see below:
#wrapper {
width:960px; /* whatever you want this to be */
margin:0 auto;
}
CSS:
#container {margin: 10% auto;}
Fiddle: http://jsfiddle.net/As2yB/
<style>
#button-fix {
margin: 0 auto;
}
</style>
Here's a demonstration of your examle in jsFiddle