index.html with a form:
<form id="mc-embedded-subscribe-form" class="validate" name="mc-embedded-subscribe-form" method="post" action="mailing.php"><pre>
<fieldset>
<div class="mc-field-group">
<div class="input-cont">
<input id="email" class="required email input-text example" type="text" name="email" value="Your email address" onfocus="value=''" style="color: rgb(178, 178, 178);">
</div>
</div>
<div class="submit-cont">
<input id="submit" class="input-submit" type="submit" name="subscribe" value="">
CSS right now:
#content form #submit {
background: url("../img/join-button.png") no-repeat left top;
border: 0 none;
color: #221505;
cursor: pointer;
float: right;
font-size: 23px;
font-weight: 800;
height: 46px;
outline: 0 none;
position: relative;
top: 1px;
width: 102px;
How in this case to specify a:hover and a:active properties and change a background images as I do not have any values in my html or is there a better way to do this? Thanks.
This should work
#content form #submit:hover {
background-image: ...
}
#content form #submit:active {
background-image: ...
}
Related
I have the following form:
body {
background: #fff;
color: 404040
}
form {
display: block;
position: relative;
width: 80%;
background: #f9f9f9;
margin: 10px auto;
padding: 30px;
}
label {
display: block;
position: relative;
top: -20px;
left: 0px;
color: #999;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
z-index: 1;
transition: all 0.3s ease-out;
}
input,
input:optional {
display: block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #ddd;
width: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 2;
}
input:focus,
input:valid {
outline: none;
border-bottom: 1px solid #00aced;
}
input:focus+label,
input:required:valid+label {
top: -40px;
font-size: 11px;
color: #00aced;
}
.divider {
position: relative;
height: 30px;
width: auto;
background: none;
}
#hex1 {
width: 75px;
margin: 10px auto;
}
.headline {
margin-left: 100px;
font-size: 24px;
}
.submitBtn {
width: 250px;
height: 75px;
border-radius: 3px;
background: #37afac;
margin: 0 auto;
color: #fff
}
#title {
margin-top: -60px;
margin-left: 80px;
margin-bottom: 20px;
}
<form>
<h3>Details about the person you are reporting:</h3>
<div class='divider'></div>
<input type="text" name="firstname" required autocomplete="off" />
<label for="firstname">First Name</label>
<div class='divider'></div>
<input type="text" name="lastname" required autocomplete="off" />
<label for="lastname">Last Name</label>
<div class='divider'></div>
<input type="text" name="age" class="test" autocomplete="off" />
<label for="age">Age</label>
<div class='divider'></div>
<input type="text" name="gender" required autocomplete="off" />
<label for="gender">Gender</label>
<div class='divider'></div>
<input type="text" name="address 1" autocomplete="off" />
<label for="address1">Address 1</label>
<div class='divider'></div>
<input type="text" name="address 2" autocomplete="off" />
<label for="address2">Address 2</label>
<div class='divider'></div>
<input type="text" name="city" required autocomplete="off" />
<label for="city">City</label>
<div class='divider'></div>
<input type="text" name="state" required autocomplete="off" />
<label for="state">State</label>
<div class='divider'></div>
<input type="text" name="position" autocomplete="off" />
<label for="Position">Position (coach, referee, etc)</label>
<div class='divider'></div>
<input type="text" name="program" required autocomplete="off" />
<label for="Program">Program where individual works</label>
<div class='divider'></div>
<input type="text" name="IncidentDescription" required autocomplete="off" />
<label for="IncidentDescription">Incident description</label>
<div class='divider'></div>
<input type="text" name="IncidentLocation" required autocomplete="off" />
<label for="IncidentLocation">Incident location</label>
<div class='divider'></div>
Codepen: https://codepen.io/anon/pen/PazrBw
As each input receives focus, it animates via receiving a class in css. Using basic html5 validation, it's supposed to retain that class to show that it's been properly filled out.
My problem is that I need some fields to be not required. When fields are not marked required, the form automatically applies some of the :valid pseudoclass (the blue underline). The even bigger issue is that when it loses focus, it loses that class and collapses the label back down onto the input text.
What am I missing here? thank you!
You are not missing anything, it all behaves the way it's supposed to be based on your code. So you need an alternative approach.
I suggest using :placeholder-shown selector instead of :valid. This way, empty optional fields will no longer get selected.
To make this work, you first need to add placeholder=" " to your inputs. This feels a bit hacky because this way you are losing the ability to use placeholders in case you need them but remember that you are already saying no to using placeholders by putting labels in their place (well, if you ever need to include placeholders for the sake of accessibility, do it, and instead of empty placeholders put real ones, then hide them with CSS. Another topic, another time).
:placeholder-shown does not have IE/old browser support so we'll go with a good example of progressive enhancement here:
Label text will be already minimised and positioned on top of the input as a default (that is top: -40px; font-size: 11px;) so that it does not mess with user input. I believe that is good enough for IE/old browsers.
Then we add the nice animation effect for browsers that do support :placeholder-shown by including following styles:
input:not(:focus):placeholder-shown + label {
top: -20px;
font-size: 16px;
}
:not(:focus) is necessary to resize and reposition label as soon as user focuses an input because some browsers show placeholder even after focus (and hide it only after user starts typing).
body {
background: #fff;
color: 404040
}
form {
display: block;
position: relative;
width: 80%;
background: #f9f9f9;
margin: 10px auto;
padding: 30px;
}
label {
display: block;
position: relative;
/* top: -20px; */
top: -40px;
left: 0px;
color: #999;
font-family: 'Helvetica', sans-serif;
/* font-size: 16px; */
font-size: 11px;
z-index: 1;
transition: all 0.3s ease-out;
}
input/*,
input:optional */ {
display: block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #ddd;
width: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 2;
}
input:focus/*,
input:valid*/ {
outline: none;
border-bottom: 1px solid #00aced;
}
input:focus+label/*,
input:required:valid+label*/ {
color: #00aced;
}
/* New styles >> */
input:not(:focus):placeholder-shown + label {
top: -20px;
font-size: 16px;
}
/* << */
.divider {
position: relative;
height: 30px;
width: auto;
background: none;
}
#hex1 {
width: 75px;
margin: 10px auto;
}
.headline {
margin-left: 100px;
font-size: 24px;
}
.submitBtn {
width: 250px;
height: 75px;
border-radius: 3px;
background: #37afac;
margin: 0 auto;
color: #fff
}
#title {
margin-top: -60px;
margin-left: 80px;
margin-bottom: 20px;
}
<form>
<h3>Details about the person you are reporting:</h3>
<div class='divider'></div>
<input placeholder=" " type="text" name="firstname" required autocomplete="off" />
<label for="firstname">First Name</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="lastname" required autocomplete="off" />
<label for="lastname">Last Name</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="age" class="test" autocomplete="off" />
<label for="age">Age</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="gender" required autocomplete="off" />
<label for="gender">Gender</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="address 1" autocomplete="off" />
<label for="address1">Address 1</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="address 2" autocomplete="off" />
<label for="address2">Address 2</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="city" required autocomplete="off" />
<label for="city">City</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="state" required autocomplete="off" />
<label for="state">State</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="position" autocomplete="off" />
<label for="Position">Position (coach, referee, etc)</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="program" required autocomplete="off" />
<label for="Program">Program where individual works</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="IncidentDescription" required autocomplete="off" />
<label for="IncidentDescription">Incident description</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="IncidentLocation" required autocomplete="off" />
<label for="IncidentLocation">Incident location</label>
<div class='divider'></div>
I have this form:
<div class="jumbotron" id="jumbotron-6" align="center">
<form action="login.php" method="POST">
<input type="text" placeholder="Enter your email" name="email">
<input type="password" placeholder="and password" name="password">
<input type="submit">
</form>
</div>
And I am trying to apply this CSS to it:
input [type="text"], input [type="password"] {
outline: none;
padding: 10px;
display: block;
width: 300px;
border-radius: 3px;
border:1px solid #eee;
margin:20px auto;
}
But it is not applying. I have my css linked up to the page too.
Remove the spacing so it would be input[....]
input[type="text"], input[type="password"] {
outline: none;
padding: 10px;
display: block;
width: 300px;
border-radius: 3px;
border:1px solid #eee;
margin:20px auto;
}
<div class="jumbotron" id="jumbotron-6" align="center">
<form action="login.php" method="POST">
<input type="text" placeholder="Enter your email" name="email">
<input type="password" placeholder="and password" name="password">
<input type="submit">
</form>
</div>
input [type="text"], input [type="password"] {
That would select elements inside an input element (impossible in HTML) that have a type of text or password - you need to remove the spaces, to select input elements that themsleves are of type text or password:
input[type="text"], input[type="password"] {
I am using the below filter to sort a list:
<fieldset class="groups">
<h4 class="cufon_headings">Groups</h4>
<div class="checkbox">
<input type="checkbox" value="member1">
<label>Member 1</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="member2">
Member 2</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="member3">
Member 3</label>
</div>
</fieldset>
This is my CSS for the above filter:
/* Checkbox Styles*/
fieldset {
display: inline-block;
vertical-align: top;
margin: 0 1em 0 0;
background: #fff;
padding: .5em;
border-radius: 3px;
}
.checkbox{
display: block;
position: relative;
cursor: pointer;
margin-bottom: 8px;
}
.checkbox input[type="checkbox"]{
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
margin: 0;
opacity: 0;
z-index: 1;
}
.checkbox label{
display: inline-block;
vertical-align: top;
text-align: left;
padding-left: 2em;
}
.checkbox label:before,
.checkbox label:after{
content: '';
display: block;
position: absolute;
}
.checkbox label:before{
left: 0;
top: 0;
width: 18px;
height: 18px;
margin-right: 10px;
background: #ddd;
border-radius: 3px;
}
.checkbox label:after{
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 10px;
height: 10px;
border-radius: 2px;
background: #E50082;
opacity: 0;
pointer-events: none;
}
.checkbox input:checked ~ label:after{
opacity: 1;
}
.checkbox input:focus ~ label:before{
background: #eee;
}
The first checkbox (Member 1) is correctly styled, i.e. checking the first option marks the checkbox magenta. In this example the tag is outside of the tags.
The other chekcbox options (Member 2 and Member 3) do not turn magenta upon selecting them. With both the tag is inside the tag.
The preferred variant is having the tags inside the tags. However, I could not figure out how to adapt the CSS to get this working. Can anyone provide help? (Here is a link to the code on CopePen)
<fieldset class="groups">
<h4 class="cufon_headings">Groups</h4>
<div class="checkbox">
<input type="checkbox" value="member1">
<label>Member 1</label>
</div>
<div class="checkbox">
<input type="checkbox" value="member2">
<label>Member 2</label>
</div>
<div class="checkbox">
<input type="checkbox" value="member3">
<label>Member 3</label>
</div>
</fieldset>
Make sure that your labels are correct for member 2 and 3. You had the label tag including the input tag. The code above seems to work.
Charlie's answer is correct. In CSS, you can't affect a parent - only a child.
before and after are puesdo elements and they're not exactly acting like normal elements, so they're not siblings of input.
In order to solve your problem, Change every:
<div class="checkbox">
<label>
<input type="checkbox" value="memberN">
Member N
</label>
</div>
Into:
<div class="checkbox">
<input type="checkbox" value="memberN">
<label>
Member N
</label>
</div>
Thank you for your comments. It was intended that the first checkbox differs from the others to show the effect.
If it is not possible with CSS I guess I need to adapt how the plugin Contact Form 7 for Wordpress gives out the HTML for checkboxes. Not the preferred way to handle the issue.
im trying to create a star rating system, i just need to focus on the css part of it at the moment.
it fills the stars as the user hovers over with the mouse, but it does it right to left and i want to make it work left to right.
Can someone show me what i'd need to change to do this. thanks.
<span class="rating">
<input type="radio" class="rating-input"
id="rating-input-1-5" name="rating-input-1">
<label for="rating-input-1-5" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-4" name="rating-input-1">
<label for="rating-input-1-4" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-3" name="rating-input-1">
<label for="rating-input-1-3" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-2" name="rating-input-1">
<label for="rating-input-1-2" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-1" name="rating-input-1">
<label for="rating-input-1-1" class="rating-star"></label>
</span>
css:
<
style>
.rating {
overflow: hidden;
display: inline-block;
}
.rating-input {
position: absolute;
left: 0;
top: -50px;
}
.rating-star {
display:inline-block;
width: 30px;
height: 30px;
background: url('assets/img/icons/stars.png') 0 0px;
background-repeat:no-repeat;
background-size: 22px 20px;
}
.rating-star:hover {
background-position: 0 16;
background: url('assets/img/icons/favorites.png') 0 0px;
background-size: 22px 20px;
}
.rating-star:hover,
.rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
background-position: 0 0;
background: url('assets/img/icons/favorites.png') 0 0px;
background-size: 22px 20px;
background-repeat:no-repeat;
}
</style>
Simply inverse the star order (in your mark-up too):
.rating-star {
float:right;
margin-right: 5px;
}
I have a table with background image shown in my site. The FF and chrome looks normal but not in IE. The background image seems to shift and generate wired result. I was wondering if anyone here can help me out on this one. Please see attached picture. Thanks for the help.
<section>
some html....
<form action="http://localhost/jobSearch/add_project/validate" method="post" accept-charset="utf-8">
<fieldset>
<legend>ADD NEW PROJECT</legend>
<label>Parcel</label>
<input type="text" name="parcel" value="">
<label>Lot Number</label>
<input type="text" name="lot_number" value="">
<label>Block</label>
<input type="text" name="block" value="">
<label>Subdivision</label>
<input type="text" name="subdivision_name" value="">
<label>Section/Phase</label>
<input type="text" name="section_phase" value="">
<input type="submit" name="submit" value="Add Project" id="submit">
</fieldset>
</form>
more html.....
</section>
CSS:
form {
display: block;
}
form fieldset {
font: bold 1.1em helvetica;
}
form label{
float:left;
display:block;
width:140px;
font:bold 1.1em Helvetica;
margin:5px;
}
fieldset{
color:black;
font:bold 1.2em Helvertica;
width:400px;
margin: 20px auto;
padding: 10px;
border:1px solid grey;
background:url('../images/background.jpg');
}
form input {
font-size: .9em;
padding: 4px 6px;
border: solid 1px #AACFE4;
margin: 5px;
width: 200px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
form #submit {
cursor: pointer;
font: bold 1em Helvetica;
padding: 4px 2px;
border: solid 1px #AACFE4;
margin: 5px;
width: 100px;
}
Your tags are not properly nested. You open with <form>, but close with </fieldset>. You need to swap the locations of the closing tags in the example below to correct the nesting issue.
<form ...>
<fieldset>
<!-- content removed -->
</form>
</fieldset>