Set select dropdown style to default - html

I set border property in select element.
select {
border: 1px solid #0f0;
}
IE7 doesn't support select styling. So now my requirement is to remove that style from all IE versions (7,8,9...) and make the dropdown as default. But this property works in above IE8. There is any css-only solution for this.
Note: I have specific IE class in html tag. can I use that in css like
.ie select {}

You can use the below css hacks to specify IE restricted features. Hope those may help you! Give the red color border for all the browsers and set ne color for the IE browsers.
/* IE 11( Specific ) */
#media all and (-ms-high-contrast:none) {
#selector {
color: #FFFFFF;
}
}
/* IE 10( specific ) */
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#selector {
color: #FFFFFF;
}
}
/* IE 9( specific ) */
#selector {
color: #000000; /* Ingeneral, for all browsers */
color: #FFFFFF \0/IE9; /* Only for IE 9 */
}
/* IE 8( specific ) */
#media \0screen {
#selector {
color: #FFFFFF;
}
}
/* IE 7( specific and below version ) */
#selector {
*color: #FFFFFF;
}
Cheers :)

There are specific CSS hacks for IE, you can try those if you want like this:
CSS
select {
border: 2px solid #0f0; /* for all browsers */
border: 2px solid #000; /* IE8 and below */
*border: 2px solid #000; /* IE7 and below */
_border: 2px solid #000; /* IE6 and below */
}
Hacking your CSS may seem a quick fix for getting your styles to work across browser types, however, you should really be using conditional statements from within your HTML. e.g.
<!--[if lte IE 9]>
Your IE8 and below HTML code here.
Perhaps importing a specific style sheet.
<![endif]-->

Related

Webkit scrollbar thumb not working on Safari 14

I'm facing some problems to add scrollbar color on safari 14. The webkit works in chrome and edge, but not in safari. There are some threads saying that safari isn't supporting webkit, but if that's true, is there a way to add the color to the scrollbar?
example from w3schools.com,
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
}

CSS Buttons on different platforms

CSS Buttons when viewed on windows desktop or apple mac have a default background color of grey (#DDD) but when viewed on ios mobile, the default background color is transparent. This can be fixed by manually adding css background color as #DDD but still why does this happen? Any Ideas?
They look different because browsers have different renderings of CSS.
I recommend to use -webkit and -moz to avoid this type of problem.
.btn{
-webkit-background-color: #DDD;
-moz-background-color: #DDD;
background-color: #DDD;
}
Different browsers have different styles for buttons, select dropdown, input file upload buttons.
These styles are taken from the default stylesheets present in the browser.
In order to avoid these default stylings, you have to reset the styles using CSS reset stylesheets like Normalize CSS, Meyers CSS reset.
Reset for button only
button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
/* inherit font & color from ancestor */
color: inherit;
font: inherit;
/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
line-height: normal;
/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
/* Corrects inability to style clickable `input` types in iOS */
-webkit-appearance: none;
}
/* Remove excess padding and border in Firefox 4+ */
&::-moz-focus-inner {
border: 0;
padding: 0;
}

CSS target internet explorer & screen width

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

AngularJS and text-angular: Change CSS style for input placeholder

On wiki page of text-angular github project, it says:
https://github.com/fraywing/textAngular/wiki/Styling-the-Editor
I tried with this code:
<div text-angular="text-angular" ta-toolbar="[]" ng-model="message"
placeholder="<div class='placeholder'>Write Coment...</div>"></div>
But the screen will show as:
placeholder show as raw html
I tried the following after taking a look at this website: https://css-tricks.com/almanac/selectors/p/placeholder/
::-webkit-input-placeholder { color: red; }
It still didn't work. How can I give custom styles to my input placeholder?
placeholders should be used with input elements and not on divs. You'd probably have to change your div tags to inputs.
You had the right idea about styling a placeholder, but you may need to adjust the vendor prefixes depending on your browser
Chrome, Safari, Opera, Edge): ::-webkit-input-placeholder
Firefox 4 through 18: :-moz-placeholder (Only one colon)
Firefox 19+: ::-moz-placeholder (two colons)
IE 10 and IE 11 :-ms-input-placeholder
/* Chrome, Safari, Opera and Edge */
::-webkit-input-placeholder { color: red; }
/* Firefox 4 through 18 */
:-moz-input-placeholder { color: red; }
/* Firefox 19+ */
::-moz-input-placeholder { color: red; }
/* IE10 and IE11 */
:-ms-input-placeholder { color: red; }
<input placeholder="Content here" />
Another thing you could try is to attach a contenteditable property to your div which will make it behave kind of like an input element. You can then set a data property to simulate the behavior of a placeholder.
Use the before pseudo selector which will target the div only when it's empty and not focused on.
[contenteditable=true]:empty:not(:focus):before{
content:attr(data-text);
color: red;
}
div {
border: 1px solid black;
}
<div contenteditable="true" data-text="Enter text here"></div>
I found a way myself.. To let the Answer part standing out to other similar questions, I choose to post answer here instead of editing original question.
Use .placeholder-text class. It's not a customized class but it's the temporary class used by text-angular when it is displaying placeholder.
.ta-bind {
&.placeholder-text {
color: red;
}
&:not(.placeholder-text) {
color: black;
}
}
( Example is in scss, remember to covert if you are using css)

How to specify the css property text-fill-color in IE and Mozilla (as I did -webkit-text-fill-color for webkit)

In chrome the color is showing, but in IE, FF how do I use this property
CSS
#Grid td.note div.has-note i {
-webkit-text-fill-color: #b4efa8;
}
In Firefox and IE you do not have text-fill-color property.Use Color instead of text-fill-color.
AFAIK text-fill-color is a non-standard, webkit only property . There is no equivalent in other browsers (maybe somebody can correct me?).
But, as this property simply overrules the standard color property, you can just add the standard color property as a fallback...
#Grid td.note div.has-note i {
color: red; /* all browsers */
-webkit-text-fill-color: #b4efa8; /* webkit browsers only */
}
div {
color: red; /* all browsers */
-webkit-text-fill-color: blue; /* webkit browsers only */
}
<div>
What colour am I?
</div>
Use this CSS
Only webkit browsers have text-fill-color property othes have only color property
#Grid td.note div.has-note i {
-webkit-text-fill-color: #b4efa8;
color: #b4fa8;
}
It can be used to work with cursor color. See the snippet...
textarea { display: block; width:100%; height: 5em; } /* Unimportant */
#t1 { color: #ff0000; }
#t2 { color: #ff0000; -webkit-text-fill-color: #0000ff; }
<textarea id="t1">I'm all RED ! Both text and cursor.</textarea>
<textarea id="t2">My cursor is RED because of "color:", but my font face is BLUE because of "-webkit-text-fill-color:". I work only in Opera, Chrome, and should start working in new Firefox (v.48) by next month :) ...</textarea>
For example w3schools.com use this in their on-line example editor to make highlighting of the code possible. Since text in can't be formatted, they made it transparent using "-webkit-text-fill-color" but kept the cursor, then they clone the code into underlying div and color it.