I want to keep the background color of the input field as 'green', the problem is that when I click on it to write something, the color changes to default white again, here is my CSS code:
input{
width: 100%;
color: $white;
border: none;
border-bottom: 1px solid $grey-light;
outline: none;
font-size: 1rem;
margin-bottom: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: $green;
}
the HTML React part:
<form className="form">
<input type="text" name="name" className="form__name" placeholder="Name*"/>
<input type="email" name="email" className="form__email" placeholder="Email*"/>
</form>
You could use input:focus to keep the background green while typing. Make sure you do not have other css which is overriding this css.
Demo:
input {
width: 100%;
color: white;
border: none;
border-bottom: 1px solid grey-light;
outline: none;
font-size: 1rem;
margin-bottom: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: green;
}
input:focus {
background: green;
}
<form class="form">
<input type="text" name="name" class="form__name" placeholder="Name*" />
<input type="email" name="email" class="form__email" placeholder="Email*" />
</form>
I think you have to use the :focus Property.
So like that:
input:focus {
background: #161616;
}
Use input:focus below input to write your css rules for the focus scenario.
Related
I'm making a form for a website and want the border of the fields to change color when the field is filled with text. I was thinking I could simply do it with adding an :active state but that doesn't seem to work...
Here is my code: https://jsfiddle.net/3uczn2bw/1/
HTML
<form>
<label for="fname">First name:</label><br>
<input type="text" placeholder="First name" id="fname" name="fname">
<label for="lname">Last name:</label><br>
<input type="text" placeholder="Last name" id="lname" name="lname">
</form>
CSS
input {
border: none;
outline: none!important;
padding: 10px 20px;
width: 300px;
}
input[type=text] {
color: #1a1a1a;
border-bottom: 4px solid #1a1a1a;
font-size: 24px;
font-weight: 900;
}
input[type=text]:focus {
border-bottom: 4px solid #178926;
}
To achieve this you need to add some scripts. I have given the script below by using this you will achieve your goal.
In script add below code:
document.querySelectorAll('input').forEach((input) => {
input.addEventListener('blur', function() {
this.classList.toggle('green', this.value.length > 0);
});
});
In CSS add below code:
.green {
border: 2px solid blue;
}
by using this CSS property you can manipulate the border properties.
This Code is useful for all input elements.
I have floating placeholder in the input field.
Placeholder will appear in center when we input value has not been provided. as shown in the below screenshot (Email and password is placeholder).
Now when you provide the value to email it does look like below. Observer the Email and password has been pulled up when value has been provided
The problem occurs when browser starts auto-filling/autocomplete this value from the saved credentials on page load like username, email, password so on. see the screen shot below:
css
:root {
--input-padding-x: .75rem;
--input-padding-y: .75rem;
}
html,
body {
height: 100%;
}
.form-signin {
width: 100%;
max-width: 600px;
padding: 15px;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.form-label-group {
position: relative;
margin-bottom: 1rem;
}
.form-label-group > input,
.form-label-group > label {
padding: var(--input-padding-y) var(--input-padding-x);
}
.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: #777;
}
HTML
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Please Type new password</h1>
<div class="form-label-group">
<input type="text" id="inputEmail" [(ngModel)]="email" name="email" class="form-control" placeholder="Email" required=""
autofocus="">
<label for="inputEmail">Email</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" [(ngModel)]="password" name="password" class="form-control" placeholder="Password"
required="">
<label for="inputPassword">Password</label>
</div>
<div class="row">
<div class="col-sm-6">
<button class="btn btn-lg btn-primary btn-block" (click)="onSubmit()" type="button">Change password</button>
</div>
</div>
</form>
I had already tried to autofocus on the email field but that did not worked.
I also tried to click the element from the code after the page load but with no luck. Please help me how do I fix this.
It works for me
.form-label-group input:-webkit-autofill ~ label {
/* CSS property */
}
You can try it
I had the same problem. In my form, I'm using the following selectors to move my label text out of the way, on any of these 3 conditions:
:focus (so it's not in the way of the cursor when focused)
:not(:placeholder-shown) (indicating "the input is not empty")
:-webkit-autofill (because 2 wasn't triggering on page refresh / autofill)
The SCSS combination is:
input {
&:focus, &:not(:placeholder-shown), &:-webkit-autofill {
&+label { /* Move your label */ }
}
}
(Note that you also need a placeholder=" " on your input.)
Here's a live example: https://codepen.io/jeffward/pen/ZdBxXd
How to change the style of a radio button in vue.js that will merge the radio button and the label of the button together. I tried to change it according to this link Simple Radio Button Styling but I am unable to change it. Below is the code
<div id="product">
<h4>{{$translate('options')}}</h4>
<div v-for="(a,key,index) in attribute">
<h5>{{a}}</h5>
<v-radio-group small row v-model="selected[index]">
<v-radio :label="v" :value="v" v-for="v in options['V'+(index+1)]" :key="v"></v-radio>
</v-radio-group>
</div>
I wanted to make it from this style of button
to this type of style
I really hope there is a way to solve this problem and I wanted to learn from my mistakes as I am still learning vue js
You can use a v-for to render any HTML code. It doesn't have to be a Vue radio button...
In this case, you need to create a wrapper for each radio button. Typically I recommend wrapping the input INSIDE the label so the entire thing becomes clickable. The following example would give you lots of styling opportunities.
<label class="radio">
<input type="radio" name="group"/>
<span>Label Text</span>
</label>
So in VUE you would need something like this:
<label v-for="opt in options" v-bind:key="opt.value">
<input type="radio" v-model="opt.checked" value="opt.value" name="opt.groupName" />
<span v-html="opt.value"></span>
</label>
The browser's default CSS should render that something like:
[ ] Label text
And now that I have more time here's how you could do the styling.
Assuming that you managed to get your HTML structured like I did, you have a lot of options. To make this work you're going to use the adjacent sibling selector to change things when the radio button is selected. Also since styling radio buttons themselves is difficult we're just going to hide it and use its state to determine what should happen.
.example {
margin: 20px;
}
.example input {
display: none;
}
.example label {
margin-right: 20px;
display: inline-block;
cursor: pointer;
}
.ex1 span {
display: block;
padding: 5px 10px 5px 25px;
border: 2px solid #ddd;
border-radius: 5px;
position: relative;
transition: all 0.25s linear;
}
.ex1 span:before {
content: '';
position: absolute;
left: 5px;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ddd;
transition: all 0.25s linear;
}
.ex1 input:checked + span {
background-color: #fff;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.ex1 .red input:checked + span {
color: red;
border-color: red;
}
.ex1 .red input:checked + span:before {
background-color: red;
}
.ex1 .blue input:checked + span {
color: blue;
border-color: blue;
}
.ex1 .blue input:checked + span:before {
background-color: blue;
}
.ex1 .orange input:checked + span {
color: orange;
border-color: orange;
}
.ex1 .orange input:checked + span:before {
background-color: orange;
}
<div class="example ex1">
<h4>Select Color</h4>
<label class="radio red">
<input type="radio" name="group1"/>
<span>Red</span>
</label>
<label class="radio blue">
<input type="radio" name="group1"/>
<span>Blue</span>
</label>
<label class="radio orange">
<input type="radio" name="group1"/>
<span>Orange</span>
</label>
</div>
If you want remove material design icon from your project or customize it, u can use something like that:
.mdi-radiobox-blank{
background-color: #fff;
border: 0.084em solid #736c63;
border-radius: 50%;
width: 20px !important;
height: 20px !important;
margin-top: 2px;
margin-right: 2px;
}
.mdi-radiobox-marked{
border: 0.084em solid #003974;
border-radius: 50%;
position: relative;
width: 20px !important;
height: 20px !important;
margin-top: 2px;
margin-right: 2px;
}
.mdi-radiobox-marked::before{
background-color: #003974;
border-radius: 50%;
width: 10px !important;
height:10px !important;
content: " ";
}
Result without material design icons:
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm working on an app that uses radio buttons. I'm trying to figure out how to make my radio buttons look better than the default radio buttons. However, I have not had any luck finding any examples online. Everything I find changes the radio buttons to a toggle button.
Basically, I want the radio button approach. I just want it to be bigger. I also want the selected radio button in a group to be green.
Is there a way to do this with CSS? If so, how? Or, do I need to use some custom control library?
Thank you!
The prevalent method is to use ::before pseudoelement, and format this. The radio/checkbox must be visually hidden.
input[type="radio"].fancy {
opacity: 0;
margin-right: -12px;
}
input[type="radio"].fancy + label::before {
content: "";
overflow: hidden;
font-size: 10px;
text-align: center;
margin-right: 3px;
display: inline-block;
vertical-align: middle;
border: 1px solid #333333;
background-color: #EEEEEE;
width: 12px;
height: 12px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
input[type="radio"].fancy:checked + label::before {
content: "•";
color: #777777;
background-color: #FFFFFF;
}
input[type="radio"].fancy:disabled + label::before {
background-color: #999999;
}
<p>
<input type="radio" class="fancy" id="radio1" name="radiogroup1" />
<label for="radio1">Fancy radio1</label>
</p>
<p>
<input type="radio" class="fancy" id="radio2" name="radiogroup1" />
<label for="radio2">Fancy radio2</label>
</p>
<p>
<input type="radio" class="fancy" id="radio3" name="radiogroup1" disabled="disabled" />
<label for="radio3">Disabled radio</label>
</p>
Googling for "css customized radio buttons" yielded a lots of useful results, such as this, here is a jsfiddle based on that tutorial, code provided below. Obviously, this is kind of workaround solution rather than native way of styling the radio buttons which to my knowledge doesn't exist.
HTML:
<div class="radio">
<input id="male" type="radio" name="gender" value="male"/>
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female"/>
<label for="female">Female</label>
</div>
CSS:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.radio label::before {
border-radius: 8px;
}
input[type=radio]:checked + label::before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
yes it can be done with the help of background image, below code snippets can be helpful
HTML:
<input type="radio" name="radio" class="radio" /> Yes
<input type="radio" name="radio" class="radio" /> No
CSS :
.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(radio.png) no-repeat;
display: block;
clear: left;
float: left;
}
links can help :
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
I have the Following Radio buttons in my jQuery mobile app , I need to style them as the Radio button in the image bellow . I have tried the following css but it didn't give me the same result , Please Help me ..
Html
<div data-role="page">
<div data-role="header" data-theme="b" style="height:63px;">
</div>
<div data-role="content">
<form>
<fieldset>
<input type="radio" id="Male" value=" Male" name="radio-group-1" />
<label for="Male" data-inline="true" style="background:transparent !important;">Male </label>
<input type="radio" id="Female" value=" Female" name="radio-group-1" />
<label for="Female" data-inline="true" style="background:transparent !important;" >Female </label>
</fieldset>
</form>
</div>
</div>
CSS
input[type="radio"] {
display: none;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
width: 25px;
height: 25px;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
margin-top: -18px;
margin-left: -38px;
}
.ui-btn.ui-radio-on:after{
width: 55px;
height: 55px;
background: green !important;
background-size:100px 24px;
}
This is what i get
To get a green inner circle with transparent around it and a border after that, you really need 2 circles. This could be achieved by adding a :before element as well as the :after element in CSS.
Here is a DEMO
The CSS makes the whole button 56px tall and vertically centers the text by making the line-height the same. When off, the radio image is 26x26 with a gray border. When on, the :before css adds a new 26x26 empty circle with a border while the :after css creates a smaller green circle in the center. NOTE: you may need to tweak sizes and margins to get your desired results.
input[type="radio"] {
display: none;
}
.ui-radio label {
height:56px;
line-height: 56px;
padding-left: 50px;
}
.ui-radio .ui-btn.ui-radio-off:after {
background-image: none;
width: 26px;
height: 26px;
border: 2px solid #6E7983;
margin-top: -13px;
}
.ui-radio .ui-btn.ui-radio-on:after {
background-color: #86D51C;
width: 14px;
height: 14px;
margin-top: -6px;
margin-left: 10px;
border: 0;
}
.ui-radio .ui-btn.ui-radio-on:before {
content:"";
position: absolute;
display: block;
border: 2px solid #6E7983;
border-radius: 50%;
background-color: transparent;
width: 26px;
height: 26px;
margin-top: 14px;
margin-left: -39px;
}