Hello I am using bootstrap as core css but also have a custom css file for various modifications however my custom radio field has a span class inserted that I cannot seem to remove. Where do I start to try and locate this or remove it by using my custom.css file
custom.css
/* pricing switcher */
.pricing-switcher {
text-align: center;
}
.pricing-switcher .fieldset {
display: inline-block;
position: relative;
padding: 2px;
border-radius: 50em;
border: 2px solid #2d3e50;
}
.pricing-switcher input.pricing-input[type="radio"] {
position: absolute;
opacity: 0;
}
input.pricing-input[type="radio"] {
display:none;
position: absolute;
opacity: 0;
}
.pricing-switcher label {
position: relative;
z-index: 1;
display: inline-block;
float: left;
width: 90px;
height: 40px;
line-height: 40px;
cursor: pointer;
font-size: 1.4rem;
color: #ffffff;
}
.pricing-switcher .switch {
position: absolute;
top: 2px;
left: 2px;
height: 40px;
width: 90px;
background-color: #2d3e50;
border-radius: 50em;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.pricing-switcher input.pricing-input[type="radio"]:checked + label + .switch,
.pricing-switcher input.pricing-input[type="radio"]:checked + label:nth-of-type(n) + .switch {
-webkit-transform: translateX(90px);
-moz-transform: translateX(90px);
-ms-transform: translateX(90px);
-o-transform: translateX(90px);
transform: translateX(90px);
}
HTML Code
<div class="pricing-switcher">
<p class="fieldset">
<input type="radio" name="duration-1" value="monthly" id="monthly-1" class="pricing-input" checked>
<label for="monthly-1">Per-Use</label>
<input type="radio" name="duration-1" value="yearly" id="yearly-1" class="pricing-input">
<label for="yearly-1">Monthly</label>
<span class="switch"></span>
</p>
</div>
Here is the compiled HTML viewing the page.
<div class="pricing-switcher">
<p class="fieldset">
<span class="icons"><span class="first-icon fa fa-circle-o fa-base"></span><span class="second-icon fa fa-dot-circle-o fa-base"></span></span><input type="radio" name="duration-1" value="monthly" id="monthly-1" class="pricing-input" checked="">
<label for="monthly-1">Per-Use</label>
<span class="icons"><span class="first-icon fa fa-circle-o fa-base"></span><span class="second-icon fa fa-dot-circle-o fa-base"></span></span><input type="radio" name="duration-1" value="yearly" id="yearly-1" class="pricing-input">
<label for="yearly-1">Monthly</label>
<span class="switch"></span>
</p>
</div>
This is how it should look without the original bootstrap radio field
https://codepen.io/anon/pen/JvmJdW
Related
I implemented this form design which moves the label out of the input field with :valid.
The issue is that on page load, my browser fills in my saved credentials and the CSS rules under :valid are not taken into account.
When I click on a blank space or anywhere really on the page, it works.
I want it to work without the user having to make an action, JS would be an option if necessary. I already tried to fire up a click event, but it does not do anything, I have to click manually to execute the CSS below :valid.
.form-input-group input:valid~label {
transform: translate(0, -200%);
}
.form-input-group input:valid {
margin-top: 30px;
}
.form-input-group input:focus~label {
transform: translate(0, -200%);
}
.form-input-group input:focus {
outline: none;
background: #ff4a56;
color: white;
margin-top: 30px;
}
.form-input-group label,
.form-input-group input {
transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}
.form-input-group {
position: relative;
padding: 10px 0;
}
.form-input-group:first-of-type {
padding-top: 0;
}
.form-input-group:last-of-type {
padding-bottom: 0;
}
.form-input-group label {
transform-origin: left center;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
font-size: 17px;
box-sizing: border-box;
padding: 10px 15px;
display: block;
position: absolute;
transform: translate(0, -100%);
z-index: 2;
pointer-events: none;
}
.form-input-group input {
appearance: none;
background-color: none;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
width: 100%;
display: block;
box-sizing: border-box;
padding: 10px 15px;
border-radius: 60px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
<form action="" method="get">
<div class="form-input-group">
<input type="text" required/>
<label>First Name</label>
</div>
<div class="form-input-group">
<input type="text" required/>
<label>Last Name</label>
</div>
<div class="form-input-group">
<input type="text" required/>
<label>Email Address</label>
</div>
<div class="form-input-group">
<input type="password" required/>
<label>Email Confirm</label>
</div>
</form>
Edit
Fun fact: even a huge site like reddit is victim to this chromium big brain decision.
It seems that this is unfixable because of the stubbornness of chromium decision makers, despite the seemingly general confusion and frustration of web devs since 2014 and other browsers behaving differently.
This is one of the many chromium bug tickets that were closed as WontFix.
Here are some others.
Edit
Via this article, I saw :-webkit-autofil and did some testing, and it seems to kind of work like I wanted. Let's just hope that it'll be working consistently over time.
I want to display a pop-up when I click on my div.
Here is my html code :
<div class="test">
<!-- <input class="input input-readonly" type="text" placeholder="Code" [value]="id" readonly>-->
<div class="test input input-readonly">{{gameId}}</div>
<div class="test__popup">
<a [cdkCopyToClipboard]="id">{{'ID' | translate}}</a>
<a [cdkCopyToClipboard]="link">{{'LINK' | translate}}</a>
</div>
</div>
Mon fichier scss :
.test {
position: relative;
input {
cursor: pointer;
user-select: none;
}
&__popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: max-content;
padding: 10px;
background-color: $color-white;
box-shadow: $shadow-default;
flex-direction: column;
border-radius: 8px;
display: none;
a {
color: $color-primary-dark;
transition: color 100ms;
padding: 4px 0;
&:hover {
color: $color-primary-light;
}
}
}
&:focus-within .test__popup,
&:active .test__popup {
display: flex;
background-color: yellow;
}
}
In my HTML code I commented an input with the same class as my div. It works for my input but for my div when I click on it, the popup appears but disappears directly.
How to reproduce the same effect as with my input, ie my popup remains on the screen as long as I have not clicked elsewhere.
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:
I'm using materialize CSS for my project, but I want to override the style of radio buttons to do give some ratings using the code from this page, so I can get this:
But instead I'm getting this:
Here is my html:
<form id="ratingsForm">
<div class="stars">
<input type="radio" name="star" class="star-1" id="star-1" />
<label class="star-1" for="star-1">1</label>
<input type="radio" name="star" class="star-2" id="star-2" />
<label class="star-2" for="star-2">2</label>
<input type="radio" name="star" class="star-3" id="star-3" />
<label class="star-3" for="star-3">3</label>
<input type="radio" name="star" class="star-4" id="star-4" />
<label class="star-4" for="star-4">4</label>
<input type="radio" name="star" class="star-5" id="star-5" />
<label class="star-5" for="star-5">5</label>
<span></span>
</div>
</form>
And this is the CSS to make the stars appear:
form .stars {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
form .stars input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
width: 20%;
}
form .stars label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
form .stars label:hover ~ span {
background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span {
width: 100% !important;
}
form .stars label.star-4:hover ~ span {
width: 80% !important;
}
form .stars label.star-3:hover ~ span {
width: 60% !important;
}
form .stars label.star-2:hover ~ span {
width: 40% !important;
}
form .stars label.star-1:hover ~ span {
width: 20% !important;
}
form .stars span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
What can I do to override the default style of radio buttons from Materialize CSS and leave only my stars?
If you are using sass, you can stop the form styling from being imported by editing /sass/components/forms/_forms.scss
#import 'input-fields';
// #import 'radio-buttons';
#import 'checkboxes';
#import 'switches';
#import 'select';
#import 'file-input';
#import 'range';
But keep in mind that none of your radio buttons will have the Material style.
I had the same problem, all I wanted was to remove those circles the same way you want, but I id it easier with the follow CSS:
[type="radio"]:not(:checked) + label::before, [type="radio"]:not(:checked) + label::after {
border: 0px;
}
[type="radio"]:checked + label::after, .with-gap[type="radio"]:checked + label::after {
z-index: -999;
}
You just need to include it after materialize or whatever CSS you have.
I am trying to make a custom placeholder for my "Search" input. It should look like a search icon (using Bootstrap glyphicon glyphicon-search classes for that) and then the word "Search", inside the input element, just as a placeholder looks like, and centered.
I am trying to position the div containing these to elements inside the input but I can't get it right.
Here's the code in jsfiddle.
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 340px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
display: inline;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 10px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .placeholder {
display: inline;
position: relative;
top: 30%;
width: 40px;
margin: 0 auto;
text-align: center;
font-size: 10px;
}
Then when focusing on the input the placeholder should be gone, I guess this shouldn't be difficult with some js.
But back to the issue, what am I doing wrong? How can I display the placeholder as intented?
Why not simplify this enormously? You already have the placeholder built into HTML! Here's what you can do:
input[type="search"]::-webkit-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
input[type="search"]::-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-ms-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
<input type='search' placeholder='search here' />
Now don't be worried, the icon isn't displaying here because I haven't included font-awesome (or whatever the Glyphicons Halflings font is provided by), but this makes it tremendously simply to create a nice placeholder. It even works like one! It also reduces your code greatly, although browser support is a little less stellar (it really depends how far back you want to go).
Font Awesome uses the unicode glyphs and a font with all those icons included, so as long as you use the right font and copy in the correct character into your content property, this will work.
this was tested in Safari and Chrome
My solution:
https://jsfiddle.net/83x8tfwp/6/
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 280px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
position: relative;
color: #aaa;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 3px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .search-input:focus + .placeholder {
display: none;
}
.search-wrapper .placeholder {
position: absolute;
top: 8px;
left: 38%;
margin: 0 auto;
text-align: center;
font-size: 13px;
}
JavaScript:
$('.placeholder').on('click', function() {
$('.search-input').focus();
});
if ($('.search-input').val()) {
$('.placeholder').hide();
}
$('.search-input').on('blur', function() {
if (!$('.search-input').val()) {
$('.placeholder').show();
}
});
$('.search-input').on('focus', function() {
if (!$('.search-input').val()) {
$('.placeholder').hide();
}
});
$('.search-input').on('input', function() {
if ($('.search-input').val()) {
$('.placeholder').hide();
}
});