I just getting started this google material design lite. And i found this textfield floating when you r focusing in this label. the color is blue or navy or idk.
the problem is, I changed the link color into this color indigo-pink
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
but there is no change for my textfield into an indigo color or a pink color when I focused on it.
question is simple, how to change it?
I did something with this, but still have no luck in it.
the HTML:
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample4">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
<label class="mdl-textfield__label mdl-color-modifier" for="sample4">Number...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</form>
the css:
div .mdl-textfield__label:after {
background: pink;
}
.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{
color:pink;
}
.mdl-color-modifier:focus{
color:pink;
}
I tried to apply a new class in it with pseudo :focus, but it still have no luck too.
I have it all. The keys are the :after modifier and the is-focused class. Just replace #FAFAFA with your indigo-pink and it should work for ya. This is just proof of concept. Check the fiddle. it has the text label colored too.
.mdl-textfield.is-focused .mdl-textfield__label {
color: #FAFAFA;
}
.mdl-textfield__label:after{
background-color: #FAFAFA;
}
https://jsfiddle.net/90u6Lxc4/30/
I believe an alternate solution would be like this, it worked for me:
.mdl-textfield__input:focus {
border-bottom-color: red;
box-shadow: 0 1px 0 0 red;
}
I deducted the answer from here.
Related
I'd appreciate some help with formatting these radio buttons:
.frm_radio div {
display:flex!important;
align-items: center!important;
justify-content: center!important;
width:100%!important;
height:400px!important;
background:white!important;
border-radius:50%!important;
border:3px black solid!important;;
}
.frm_radio label {
width:80%!important;
font-size:30px!important;
color:black!important;
line-height:1.2!important;
margin:auto!important;
}
.frm_radio input:checked + div {
background:#FFC5FF!important;
}
.frm_radio input {
display:none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frm_radio" id="frm_radio_15-0"> <input type="radio" name="item_meta[15]" id="field_2ycsr-0" value="0.65" data-frmval="1" data-invmsg="Watcha normally eat? is invalid"><div>
<label for="field_2ycsr-0"> <3 plants (vegan or vegetarian)</label></div></div>
The whole thing is wrapped up in a CSS-Grid that makes everything square (so they're circles instead of ovals). I've emulated that in this CSS just by adding a height.
My issue is that I want the entire circle to be clickable; now only the text is clickable. How should I lay this out to make it work that way?
Reason for all the !important tags: I'm using Formidable Forms plugin to make the form. I realise it's messy, but it works just fine for this!
To make the whole circle clickable, move <input> into <label> tag (in this case, you can also remove id and for attributes). So, the resulted solution should be:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frm_radio" id="frm_radio_15-0">
<label>
<input type="radio" name="item_meta[15]" value="0.65" data-frmval="1" data-invmsg="Watcha normally eat? is invalid">
<div>
<3 plants (vegan or vegetarian)
</div>
</label>
</div>
I'm trying to change the success/error message of the mailchimp subscription form (right side-bar) on my website www.justnk.com
I can't figure out what's stopping my css code from working/ what in the html might be triggering some automatic pull in that I am unaware of.
I've tried rooting around the various answers shown here but most of them deal with changing the text itself not the color.Wordpress.org also had this tutorial (https://wordpress.org/support/topic/change-colour-of-success-message-text/) but I couldn't get it to work.
CSS I'm using
/Response to form submission/
#mc_embed_signup #mce-responses #mce-error-response #mce-success-response.response {color: #ffffff !important; display: none !important;
Mailchimp form html
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"><style type="text/css"> #mc_embed_signup { clear:left; font:14px Helvetica,Arial,sans-serif; }</style>
<div id="mc_embed_signup">
<form action="https://justnk.us20.list-manage.com/subscribe/post?u=065434ce0102b8abd6dc55f58&id=2b797af7d4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h6>JOIN THE NEWSLETTER</h6>
<p align="center">
My newsletter on the latest from the blog. Don't worry we won't spamming.
</p>
<div class="indicates_required"> *indicates required </div>
<div class="mc-field-group">
<input type="text" value="*First Name" name="FNAME" class="required" id="mce-FNAME" placeholder="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="email" value="*Email Address" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div id="mce-responses" class="clear" color="white">
<div class="response" id="mce-error-response" style="display:none">
</div>
<div class="response" id="mce-success-response" style="display:none">
</div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_065434ce0102b8abd6dc55f58_2b797af7d4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
Since the background is bright pink I'd rather the success/error messages be green and grey respectively so I'd like it to be white.
Let's break down things, so it will be easier for you.
If you only need to change the font color, you need to target the message area. The message area uses classes #mc_embed_signup (which notes that this is the id of that whole field) and #mce-success-response (which means in that field of the signup you want to target only the success message). In this case, enter this CSS code into the "Additional CSS" part of Wordpress Customizer:
#mc_embed_signup #mce-success-response {
color: white;
}
As you will see, the success message font will be white. You can change it to any other color and also use HEX color codes (help yourself with this page). If you also need to change the error message, then instead of #mce-success-response use #mce-error-response. Check this page on CSS "color" property.
If you want to add a background to this field, you use the same code as above, but instead of color: you use background-color: - the same applies as above. Use a HEX color code and specify what color of background do you want.
But if you add this code, you may see that there will be no breathing space in the field:
This is because the field isn't prepared for the background color, so you have to target the class of that field (which is div.response) and change the padding of it. So you can use this code:
#mc_embed_signup div.response {
padding: 1em 1em 1em 1em;
}
So if we sum it up. If you want to change the color of the font and change the background color of it, you use this code:
#mc_embed_signup #mce-success-response {
color: white;
background-color: blue;
}
This says that the success message field will have a white font color and have a blue background color. For the error message, you need to use #mce-error-response tag (#mc_embed_signup #mce-error-response). If you want to add some padding to it, use the above code I wrote and change it to your desire (you can use 0.5em or 1.2em etc).
For more about this, read some articles here - this one is about padding property, this is about "em" unit and you have some articles above for HEX codes and text colors.
That worked! Just need to add this to Mailchimp html code itself, under the style:
<style type="text/css">
#mc_embed_signup #mce-success-response {
color: white;
font-weight: 700;
text-transform: uppercase;
}
</style>
I have an form in html where I want to add the tooltip when the user hover on some input field. The tooltip data is however fetched from json and is dynamic. How do I do this?
I tried the following:
<div data-balloon="{{ obj.info }}" data-balloon-pos="up">
<input class="form-control" type="text" [id]="obj.key">
</div>
But it throws the template parse error:
Can't bind to 'balloon' since it isn't a known property of 'div'.
I also tried:
<div [data-balloon]="obj.info" data-balloon-pos="up">
<input class="form-control" type="text" [id]="obj.key">
</div>
How shall I proceed?
You could simply use a pseudo-element with only CSS, to display any of your attribute:
div[data-balloon] {
float:left;
}
div[data-balloon]:hover::after {
content: attr(data-balloon);
border: 1px solid black;
border-radius: 8px;
background: #eee;
padding: 4px;
}
<div data-balloon="My data here" data-balloon-pos="up">
<input class="form-control" type="text" [id]="obj.key">
</div>
If there is nothing more in your div element, it should work fine to use the :hover on the div.
If there is something more… You may want to move your data-balloon to your input element, as “parent” selection is not possible in CSS.
Hope it helps.
I'm using the custom forms of Bootstrap 4 on a website and while clicking there is a weird light-blue background behind the indicator (see BS 4 documentation or picture).
I now played around with my web console and tried different things to get rid of that background, but didn't manage.
I know that the background is on the focus of the actual input, which is set to display none... I have tried adding different styles to the label and/or the input, such as box-shadow: none; outline: none; background-color: transparent; etc. but neither of them worked.
This is why I'm searching for a solution here on StackOverflow. I hope, that someone can help.
Normal unchecked custom checkbox of BS 4
The weird light-blue background appearing from nowhere on focus
The checked custom checkbox of BS 4
Here is something :
Bootply : https://www.bootply.com/s82twl3iDl
CSS :
.custom-control-input~.custom-control-indicator{
background-color: grey !important; // select the background color
}
.custom-control-input:focus~.custom-control-indicator{
box-shadow: none !important;
}
HTML :
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
One of Bootstrap's styles is
.custom-control-input:active~.custom-control-indicator{color:#fff;background-color:#b3d7ff}
So if you don't want that, if you want it to have the same color as in the not active stage, just change it back to #ddd.
body .custom-control-input:active~.custom-control-indicator {background-color:#ddd}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
(Note: I had to add body in front of my selector to make the specificity higher, because the link to Bootstrap is included below the snippet styles.
Normally this wouldn't be necessary, since Bootstrap is normally included before your own styles.)
CSS
.custom-control-input:active~.custom-control-label::before {
background-color: #dee2e6;
}
The blue background appears on active.
On focus, a blue border appears. You can set the color to whatever you want. You can use the following code (below) to remove the blue border.
.custom-control-input:focus~.custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(222,226,230, .5);
}
HTML
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rememberMe"
name="rememberMe">
<label class="custom-control-label" for="rememberMe">Remember me</label>
</div>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Highlight label if checkbox is checked (html/css)
I would like label to get a red border if radio is checked.
Code so far:
HTML:
<center style="margin-top:20px;">
<label class="big">
This is a box 1
<input name="radio-group1" type="radio" />
</label>
<br/>
<label class="big">
This is a box 2
<input name="radio-group1" type="radio" class='sex' />
</label>
</center>
CSS:
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
}
.big:hover {
border:1px solid blue;
}
No JS solutions please. I have been trying with sibling and children selectors but unsuccesfuly.
JSFIDDLE: http://jsfiddle.net/QqVCu/10/
You would have to rearrange the HTML so the label/red-border-element comes after the radio.
HTML
<center style="margin-top:20px;">
<div class="big">
<input id="box1" name="radio-group1" type="radio" />
<label for="box1">This is a box 1</label>
</div >
<br/>
<div class="big">
<input id="box2" name="radio-group1" type="radio" />
<label for="box2">This is a box 2</label>
</div >
</center>
CSS
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
position: relative;
}
.big:hover {
border:1px solid blue;
}
label {
width: 100%;
height: 100%;
display: block;
}
input[type="radio"] {
position: absolute;
top: 20px;
left: 50%;
}
input[type="radio"]:checked + label {
border: red 1px solid;
}
http://jsfiddle.net/QqVCu/12/
But it starts getting weird. A little javascript wouldn't hurt.
edit: this version is a little cleaner
You can use :checked selector, but this will only work for the checkbox itself. Otherwise there is no way to do it in pure CSS - you will have to resort to JavaScript (which I do realize you said you wanted to avoid - but pure CSS won't do it).
What you are trying is not possible with current structure of your html. There is no such thing as a parent selector. There is a sibling selector though, wich could be used to accomplish what you are after. First you would have to restructure your html to something like this:
<div>
<input name="radio-group1" id="box1" type="radio" />
<label class="big" for="box1">
This is a box 1</label>
</div>
<div >
<input name="radio-group1" id="box2" type="radio" class='sex' />
<label class="big" for="box2" >
This is a box 2</label>
</div>
I made label and input siblings in stead of parent/child. They will still work the same thanks to their id and for attributes. I also changed their order to be able to use the next sibling selector. The extra div is required to do some absolute positioning to put them back in the same order you had in your fiddle.
Next i added a few lines of css. The real magic happens here:
div input:checked+label {
border: 1px solid red;
}
This will selected all 'next sibling' of an input that is checked and has a div as a parent. You could further finetune this to only work on radio's and in reality i would add a class to the wrapper div, but this is just a 'proof of concept'.
The rest of the css i added is just some positioning to mimic the layout you had in your example. This will also need some finetuning.
The working example is here: http://jsfiddle.net/QqVCu/14/