I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
Related
I am attempting to build a page that offers RSS feeds, just title and dates of articles. This is a snapshot of what I have so far.
.wp-block-rss__item {font-size: 12px; color: #000000}
.wp-block-rss__item-publish-date {font-size: 12px; color: #000000}
Now, the second line of code, tells me I got something right. The font size and color both change the date to what I want. But the first line, only the font-size is working, I can change the article title (rss item) font size, but the color remains.
I am also trying to hide the bullet point image that flows from the RSS feed.
I tried
.wp-block-rss_item::marker {display: none;}
For what it's worth, this is my first attempt at this type of CSS manipulation, I'm using the Chrome developer tools / inspector to help identify what needs changing. Prior, I had a web page that used a paid theme, and would just post "how do I do this?" and someone would reply with code within a day or two. I'd like to learn to do these simple things myself. Happy to clarify anything or post other details from the Chrome tool.
Adding this in response to comments - my inspector view looks like this. (yes, a different rss feed from posted above, same issue for all the feeds)
Try using !important behind your statements to override already given properties.
For example:
.wp-block-rss__item {font-size: 12px; color: #000000 !important}
writing this to make it easier for people to find the solution that i wrote in the comments.
To fix this the easiest way is to change the .wp-block-rss__item {font-size: 12px; color: #000000} rule into
.wp-block-rss__item a {
font-size: 12px;
color: #000000
}
Why does this happen? To make it easy, you are dealing with CSS specificity, which is what makes CSS so flexible (while also making it difficult for people to approach it). So, to get on your point, every HTML element has it's "basic" styling, in the case of an a like yours it's blue colored and underlined like it was showing in the first screenshot, but why was your code changing the font-size but not the color? Simply because the "basic" styling of the a doesn't have a font-size, but it has a color and that color was overriding your rule, this is because for CSS the rules that were applied to the a are more specific than the rules applied to .wp-block-rss__item which was the parent of the parent of your a. Changing the rule like i suggested you tells the browser that every anchor inside a .wp-block-rss__item has to get that styling, which, in this case is more specific than the "basic" styling. I'll give you an example, maybe it's easier to understand
.parent{
color: red;
}
.parent .green{
color: green;
}
.kid a{
text-decoration: none;
color: black;
}
.kid .custom-link{
color: white;
background-color: red;
padding: 5px;
}
<div class="parent">
<span> This text is red </span> <br>
<span class="green">This text is green</span> <br>
This is a normal link <br>
<div class="kid">
This is a custom styled link <br> <br>
This is another custom styled link with a more specific selector
</div>
</div>
Notice how the normal link doesn't get the color of the .parent (red) BUT when i use a more specific class .kid a both links in the kid element get the style without the underline and the color black. The second link has a more specific class so it gets the color from that.
You can read Here and over here for more info. I know this might look scary and hard to understand, but trust me, work with CSS for a month or so and it will become natural.
Hope I explained myself good enough, let me know if you don't understand something
The context is I need to use select elements built from a framework that I would prefer not to change (respectively jqxComboBox and jqxDropDownList from jQWidgets), and use their built-in placeholders.
jqxComboBox creates an inner input for that with the attribute placeholder="my text", so it gets styled correctly in browser-dependant placeholders gray.
However jqxDropDownList creates an inner span with the attribute unselectable="on" that by default appears in the page's font color.
I'd like to style the jqxDropDownList accordingly, but the gray changes following the browser. Is there a consistent way to obtain the placeholder color that uses the browser, without having to declare a different rule for every one?
example: this gray is nice for Firefox, but not on Chrome (the difference might seem small here, but it is accentuated with our CSS).
body {
font-weight: bold;
}
input { /*just for the example*/
width: 100%;
}
input::placeholder { /*just for the example*/
font-weight: bold !important;
}
span[unselectable="on"] {
color: #777777 !important;
}
<input style=type="textarea" placeholder="native browser placeholder color"><br>
<span unselectable="on">testing placeholder color emulation</span><br>
<span>what I have currently in my jqxDropDownList</span>
EDIT: partially solved my problem by overriding placeholders color for all browsers following this post's accepted answer, but still interested for the sake of pure knowledge..
Try using color: unset to use the default color for given element.
I'd like to have a placeholder of sorts for my DIV tag, which appears when the DIV is not in focus and has no text. I know there are multiple SO links on this, but the common solution provided by everybody, doesn't seem to work for me. Following is the HTML and the CSS. Why is this not working?
Code:
#composeBody:empty:not(:focus):before{
content:attr(data-placeholder);
color: #555;
display: block; /* For Firefox */
}
<div id="composeBody" data-placeholder="Start composing your message..." contenteditable="true"></div>
there are lot of options using javascript, but if you want to do it in css.Try this:[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text)
}
html: div( contentEditable=true data-text="Enter text here")(/div)
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
On a project using jQuery UI and jQx, we are applying to all form fields the user selected theme and came across this problem :
When selecting text in input (text) fields, the background color is not the same across browsers. I know that this is browser / OS specific, however it leads to this oddity :
Chrome
IE 8 and 9
As you can see, the selected text in IE may cause problems as the selection background color blends with the rest of the element. (Why IE has this color set to white is beyond me.)
I have tried the "changing text selection color" CSS trick, but it works everywhere else than what I'm trying to change.
Is there some voodoo magic or some other poorly documented feature that can make IE behave less like... how it behaves? (And hope that IE10 really sucks less.)
Even though this question is very old I'm answering here to save anyone else trying to resolve this thinking it isn't possible. We were ready to give up and just accept this behaviour from Internet Explorer when we stumbled on the answer accidentally.
It seems that Internet Explorer uses this highlight method for selected text in any textbox that has the color set in its style - if you remove this attribute the highlighting works normally.
We stumbled accross the answer when we moved the color attribute into its own class and applied both classes to the textbox.
The following will exhibit this text selection highlighting in IE:
<input type="text" id="uiSizeWidth" class="SizeInput">
.SizeInput {
width: 70px;
text-align: center;
height: 30px;
font-weight: bold;
margin: 2px;
color: #ef4915;
}
But this will not:
<input type="text" id="uiSizeWidth" class="SizeInput InputColor">
.SizeInput {
width: 70px;
text-align: center;
height: 30px;
font-weight: bold;
margin: 2px;
}
.InputColor {
color: #ef4915;
}
You can then use the following CSS to style the highlighting to whatever:
::-moz-selection {
color: #fff;
background: #39f;
}