I've tried a few different things and I can't seem to figure out how to change the opacity of the placeholder without the opacity for the text input to be included.
Here is the code:
<label for="CI_company-organization-input" class="col-lg-10 col-form-label" style="margin-top: 5px;" required>Company/Organization</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="CI_company-organization-input" placeholder="Ex: GreyBar">
</div>
I want to make the opacity of the placeholder to be 0.5 but make the text input to be normal opacity. I've tried placing a style tag after the placeholder attribute but all that does it make the opacity of the input text also 0.5 opacity.
Is this possible?
You maybe want to try this and le t me know if it works?
input.form-control::placeholder {
opacity: .5;
}
Here is a possible solution with some fallbacks
https://codepen.io/gurgen/full/Kemeyv
<label for="CI_company-organization-input" class="col-lg-10 col-form-label" style="margin-top: 5px;" required>Company/Organization</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="CI_company-organization-input" placeholder="Ex: GreyBar">
</div>
Here is the CSS
input.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: .5; /* Firefox */
}
input.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .5;
}
input.form-control::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .5;
}
Related
I've a semi-complicated user registration form that Google Chrome is ruining. As per design, I've moving/animated placeholder which moves out of input to 20px above it on user focus, and stays there if something is in the field. Come Chrome autocomplete, everything is messed up with email field.
So, I assume focus event is not being invoked on autocomplete, hence everything breaks.
Example on JS fiddle, though I'm not getting autocomplete there: https://jsfiddle.net/dxgou68p/1/
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<form>
<div class="form-field">
<label>
<input type email placeholder=" ">
<span>Placeholder Text</span>
</label>
</div>
</form>
How can I make it so that autocomplete doesn't rule styling?
EDIT: It is not that color is changed, bur rather span tarnsition efect doesn't do it's thing on autocomplete.
input:-webkit-autofill{
-webkit-text-fill-color: black !important;
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
This should prevent Chrome doing any styling on the inputs
For more info see Removing input background colour for Chrome autocomplete?
I wrote such a code to operate opacity at check time. This worked.
#check1:checked+.box {
animation: blink 1s;
}
#keyframes blink {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
I also wanted to do the same operation when unchecking, so I added the animation property.
However, this will not work and the animation at check will not work. Why does this happen?
#check1 + .box {
animation: blink 1s;
}
#check1:checked + .box {
animation: blink 1s;
}
#keyframes blink {
0%, 99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
Also, I defined an animation with the exact same processing as another name, and it worked normally. Why does this happen? Is there a smart CSS solution?
#check1+.box {
animation: blink1 1s;
}
#check1:checked+.box {
animation: blink2 1s;
}
#keyframes blink1 {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes blink2 {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
go through it, I hope it will work for you
#check1+.box {
opacity:1;transition: 1s;
}
#check1:checked+.box {
opacity:0;transition: 1s;
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
"...but why does it stop working when changing it to the checked pseudo-class?"
The unchecked state needs to have an explicit selector like:
#check1:not(:checked)
but that won't work with current layout because:
The trigger (i.e. <label>) is nested within the target (i.e. .box). That looks very awkward. In the updated demo, I had to remove the trigger from the flow by using:
position:absolute; z-index: 1; pointer-events:auto
and then the target (i.e. .box) pointer-events: none
The checkbox "state" is persistent so if selectors are similar, more than likely the latest version overrides previous selectors. In order to make everything animate from one keyframe I needed behavior that did not persist and had only one state -- :active.
:active
The animation occurs when the checkbox is checked/unchecked. If you take a step back check/uncheck looks a lot like click and the animation itself behaves briefly (like its namesake "blink"). The state of :active occurs when the user clicks -- specifically mousedown until mouseup.
HTML
Required
<br id='target'>
...
<a href='#target' class='link'>X</a>
CSS
Required
.box { pointer-events: none; }
.link { ...position: relative; z-index: 1;...pointer-events: auto; }
:target + .box :not(:active) { ... }
Demo 1
.box {
pointer-events: none;
}
.X {
display: inline-block;
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.1);
width: 5ch;
height: 2.5ex;
line-height: 2.5ex;
border: 2px outset grey;
border-radius: 4px;
color: #000;
text-align: center;
text-decoration: none;
padding: 1px 3px;
pointer-events: auto;
}
:target+.box :not(:active) {
animation: blink 2s linear 0.1s;
}
#keyframes blink {
0% {
opacity: 0s;
}
70% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<br id='target'>
<article class="box">
<section class="content">
<p>Content inside .box</p>
<a href='#target' class='X'>X</a>
</section>
</article>
<p>Content outside of .box</p>
I created a div that when hovering, reveals a form. the problem is each time im moving the cursor the transition takes place and filling the form become impossible. how can i make the transition work once and than stay/ last for long time?
*i found some information about the delay option but i didn't find a way to modify the delay time separately for the first hovering and then for when the cursor moves out of the div (when "unhovering"). im looking for a pure css sulotion
HTML:
<form id="women">
<label >
<input type="text" name="fullName" >
</label>
</form>
<div id="wcover"></div>
css:
#wcover{
right: 177px;
z-index: 1;
top: 291px;
position: absolute;
width: 337px;
height: 402px;
background: yellow;
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
}
#wcover: hover{
height: 0px;
background:black;
}
Assuming your div is before the form, you may use a transition (e.g. of the opacity property) with a long delay on "unhover"
e.g.
Markup(*)
<div id="wcover">hover me</div>
<form id="women">
<label >whats your name</label>
<input type="text" name="fullName">
</form>
Css
form {
opacity: 0;
transition: opacity 1s 999999s;
}
div:hover + form {
opacity: 1;
transition: opacity 0s;
}
After the hover event, thanks to the delay inserted, the user may takes up to 999.999 seconds (approx.ly 277.7 hours) to fill the form.
Live Example: http://codepen.io/anon/pen/dPYOLB
(*)As a side note, for a matter of markup validation, you can't insert an heading into a label.
You properly need some jQuery here....
$("#wcover").hover(function() {
$("#wcover").addClass("hovered");
});
And some CSS:
.hovered { //Properties here }
Alternatively, you could make use of a checkbox to show/hide your div on click. It is not very clear from your question as to whether you are showing the form which is shown in your code, or the div itself which contains another form.
Am assuming, that you have a form inside the div.
#wcover {
opacity: 0;
transition: all 1s;
}
label[for=chk] { cursor: pointer; }
#chk { display: none; }
#chk:checked + #wcover { opacity: 1; }
<label>
What's your name?
<input type="text" id="fullName" />
</label>
<br /><br />
<label for="chk">Click to Show/Hide Complete Form</label>
<input id="chk" type="checkbox" />
<div id="wcover">
<form id="women">
<h2>Complete Form</h2>
<input type="text" /><br/>
<input type="text" /><br/>
</form>
</div>
Could you not wrap it all in a containing div and apply the hover to that?
<div id="form-container">
<form id="women">
<label >
<input type="text" name="fullName" >
</label>
</form>
<div id="wcover"></div>
</div>
Hi Use CSS transitionn delay property
#wcover{
right: 177px;
z-index: 1;
top: 291px;
position: absolute;
width: 337px;
height: 402px;
background: yellow;
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
transition-delay: 1s;
}
#wcover: hover{
height: 0px;
background:black;
transition-delay: 0s;
}
The above css will give delay after the mouse out. just reverce it to do it other way
How can I make this div stay active after the click?
I tried looking it up but saw nothing that applied to textarea transitions
CSS:
.comment-box:active {
/* Settings for Transition */
height:100px;
/* Transition: Basic */
transition-duration:0.8s;
transition-timing-function:ease;
/* Transition: Chrome+Safari */
-webkit-transition-duration:0.8s;
-webkit-transition-timing-function:ease;
/* Transition: Mozilla */
-moz-transition-duration:0.8s;
-moz-transition-timing-function:ease;
/* Transition: Opera */
-o-transition-duration:0.8s;
-o-transition-timing-function:ease;
}
HTML:
<textarea type="text" validation="required" name="comment" placeholder="type a comment here..." maxlength="500" class="comment-box"></textarea>
Hopefully tis is a reallllly easy fix that I'm just not seeing, but I've been trying every solution I could find that arched even close to this in previously submitted questions and I'm just getting nowhere.
The short of it: I've got a CSS tab setup working that's great, EXCEPT for when it comes to styling the actual labels on the tabs. It works great with a single style, but as soon as I try to introduce a secondary font style (bringing the font size down to 11px), the right hand side of the tab disappears.
And unfortunately I NEED to be able to have those two different font sizes/styles displayed in the tab label. I've tried using span, div, etc. treatments but everything makes the right border of the tab go away. Any help is HUGELY appreciated!
Here's a fiddle: http://jsfiddle.net/wKtPL/
Here's my sample HTML:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Library <div class='tab-count'> 123</div></label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Institution’s Subscriptions</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Copyright Agent</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Internet Archive</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">HathiTrust</label>
<div class="content">
content goes here
</div>
</div>
And the CSS behind it:
.tabs {
position: relative;
min-height: 550px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #dadcde;
color: #3f4b54;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
font-size: 14px;
font-weight:bold;
margin-right:5px;
}
.tab-count {
font-size: 11px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 3px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
By secondary font style do you mean the div nested in the label? If that's the one with class .tab-count you could set float:right. That will keep it in the same line.
.tab-count {
font-size: 11px;
float:right;
}
A couple of things, firstly the 123 is being hidden under the .content so you need a taller top value.
Secondly, your labels, while being position: relative; are still only being implicitly rendered as display: inline;, so it's hiding the 123 div underneath the label itself.
http://jsfiddle.net/wKtPL/1/
.tab label {
[ ... ]
display: inline-block;
min-height: 2.5em;
}
.content {
[ ... ]
top: 60px;
}
... and muck with styling as you need.
This is caused by the usage of a block element inside your label element, which is an inline element. To fix this, change your <div class='tab-count'> 123</div> to <span class='tab-count'> 123</span>. Here is a demo of it.
If you want to allow block-level elements to be placed within inline elements, you could like #setek said, use the alternative inline-block which is a kind of hybrid of block elements and inline elements.
You should never use block elements inside inline elements, since that will cause problems like this one. What was happening was that the styles for the inline <label> tag were being dragged across 2 lines, since the <div> was taking up an extra line. That dragged the left border down a line too, which is why you didn't see it anymore (it was below the other tabs).