I want to make input fields with zero transparency for placeholder text
<input type="text" placeholder="Enter your name here" />
I used following css properties which fixed transparent in Firefox but it still shows text with transparency on iPhone and android browsers
i am using following css
::-webkit-input-placeholder { /* WebKit browsers */
opacity: 0.8;
-webkit-opacity:0.8;
-khtml-opacity: 0.8;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
opacity: 0.8;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
opacity: 0.8;
}
How can i make placeholder with 100% opacity for android & iphone browsers.
You can control your view in the mobiles or in any device through the "media query"
media Query : is used to define different style rules for different media types/devices.
for example for the iphone6 you can use this code to hide the transparency or to set any css rule you want for this screen size,
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* your style here */}
Update
You can use Important to set the rule and give it the priority, check the code below :
::-webkit-input-placeholder { /* WebKit browsers */
opacity: 1 !important;
}
I resolve transrency issue by using RGBA
Opacity was not working as it works for the whole element so i used RGBA
color:rgba(0,0,0,1);
::-webkit-input-placeholder { /* WebKit browsers */
opacity: 0.8;
-webkit-opacity:0.8;
-khtml-opacity: 0.8;
color:rgba(0,0,0,0.8);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
opacity: 0.8;
color:rgba(0,0,0,0.8);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
color:rgba(0,0,0,0.8);
}
sample fiddle http://jsfiddle.net/vbMw3/699/
Related
I am trying to add a custom style for only internet explorer but it needs to be different for different screen sizes.
To only target IE I'm using this.
#media screen\0, screen\9 {
.site-logo{
max-width: 150px;
}
}
To then add a browser width I've tried this but it doesn't work:
#media screen\0 and (min-width: 59.6875em){
.site-logo{
max-width: 300px;
}
}
This may be easy but I cannot figure it... thanks in advance
You can use the property IE hacks instead
#media screen and (max-width: 59.6875em) {
.site-logo {
color: red\9; /* IE6, IE7, IE8, IE9 */
/* or this */
color: red\0; /* IE8, IE9 */
/* or this */
color: red\9\0; /*Only works in IE9*/
/* every browsers */
color: red
}
}
<div class="site-logo">text</div>
Changed min to max for demo purposes
everyone!
[edit]
Take a look at the fiddle I created, it looks like inside footer element placeholder styling is not working. Any idea how to overcome this?
I tried to use:
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #3d3d3d!important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #3d3d3d!important;
opacity: 1!important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #3d3d3d!important;
opacity: 1!important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #3d3d3d!important;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #3d3d3d!important;
}
as well as:
footer::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #3d3d3d!important;
}
and it didn't help.
Keep in mind I want a separate color for placeholder text and for input text typed by the user.
Any idea where to start?
OK, it was really stupid one. There was a javascript added to input element:
<input type="text" name="woochimp_widget_subscription[email]" id="woochimp_widget_subscription_email" class="woochimp_widget_field" required="" value="Enter your email..." onfocus="this.value='';" onblur="if(this.value=='')this.value='Enter your email...';" />
after removing the js code and adding placeholderattribute:
<input type="text" name="woochimp_widget_subscription[email]" id="woochimp_widget_subscription_email" class="woochimp_widget_field" required="" value="Enter your email..." placeholder="Enter you email..." />
it started to work just nice.
Thank you All for your help!
It may not make a difference, but try moving the comments so that they fall outside the style declarations.
Also, don't forget to include:
::-ms-input-placeholder {color: #3d3d3d;} /* Edge */
Full styles:
::-webkit-input-placeholder {color: #3d3d3d;} /* WebKit, Blink and Opera */
:-moz-placeholder {color: #3d3d3d; opacity: 1;} /* Mozilla Firefox 4 to 18 */
::-moz-placeholder {color: #3d3d3d; opacity: 1;} /* Mozilla Firefox 19+ */
:-ms-input-placeholder {color: #3d3d3d;} /* Internet Explorer 10-11 */
::-ms-input-placeholder {color: #3d3d3d;} /* Edge */
:placeholder-shown {color: #3d3d3d;} /* CSS Level 4 Selector */
#coupon_code::-moz-placeholder {
color: #d3d3d3!important;
opacity: 1!important;
}
i have change above css line in your fiddle, hope this will help you.
I changed the placeholder font color of an input field to blue, I've tested it in Chrome, it's color is blue. But in FF 23.0.1, the color is slightly "lighter" than blue.
See the contrast below, note the "Month" is within a span and color is also blue:
In Chrome, it's fine, see below:
However, in firefox 23.0.1, looked like this:
In IE8, not display:
Note the difference of the color.
Below is the css code I am using:
.month_span { color: blue; }
.input::-webkit-input-placeholder { color:blue}
.input::-moz-placeholder { color:blue; } /* FF 19+ */
.input:-moz-placeholder { color:#bbb; } /* FF 18- */
.input:-ms-input-placeholder { color:#bbb; }
My Question:1. Why the color is lighter in FF? 2. How to display placeholder value in IE?
The placeholder attribute isn't supported by IE until IE 10, so that explains that.
Firefox apparently applies opacity:0.54 to the placeholder text:
http://css-tricks.com/snippets/css/style-placeholder-text/
This will fix:
.input::-moz-placeholder { color:blue; opacity: 1; } /* FF 19+ */
.input:-moz-placeholder { color:#bbb; opacity: 1; } /* FF 18- */
I can able to get this functionality in Firefox and chrome. but below code, text is displaying in IE. that text should not display.
<a target="_blank" href="#">edit</a>
<style>
a {
background: url("../images/edit1.gif") no-repeat scroll 0 0 transparent;
color: transparent !important;
}
</style>
Mostly IE 5-8 does not support the transparency property. But IE 9 will support it.
While searching for my blog i found the following method
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
And
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
I referred this in Blog 1 and Blog 2
all
As you can see in images i have gradient background (this is responsive layout) and i want to display testimonials on that.
the problem is, i want the transparent bg.
i have tried to use this
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
but its shows something like this is not my solution
How can i set testimonials bg same as in my web site bg.
Can semi transparent png can sole this or any other way to solve it ?
thanks in advance...
Try using rgba as a background. This gives you the option of background opacity. Here's a little calculator I use all the time to get hex to rgba http://hex2rgba.devoth.com/.
I'm not quite sure if I understand the question, but that's what you can use if you want semi-transparency. For full transparency, just use background: transparent. And it should work.
EDIT: I believe I understand the question more now. The reason that you were getting the result, is because you were setting the entire element to be at opacity 0.5, not just the background. If you use rgba like i suggested, you can set the background to be semi-transparent like this
background: rgba(238, 238, 238, 0.5);
try this one
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
or something like this
.transeffect {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}