I have a jsfiddle here - https://jsfiddle.net/5qmnptuk/4/
I'm trying to craete a custom radio button.
Ive hidden the radio button and then created the new one with :after on the label.
I'm trying to use :checked to style the clicked but its not working
Can anyone see why this doesn't work.
.form-group{
margin-top: 30px;
}
label{
cursor: pointer;
display: inline-block;
position: relative;
padding-right: 25px;
margin-right: 15px;
}
label:after{
bottom: -1px;
border: 1px solid #aaa;
border-radius: 25px;
content: "";
display: inline-block;
height: 25px;
margin-right: 25px;
position: absolute;
right: -31px;
width: 25px;
}
input[type=radio]{
display: none;
}
input[type=radio]:checked + label{
content: \2022;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
There are several problems with your code:
1 - Your input needs to be before the label
The + and ~ CSS selectors only select siblings after an element in the DOM, so you need to have the input before the label.
2 - Your label isn't assigned to the input
To assign the label, use the for attribute, and give the input an ID:
<div class="form-group">
<input type="radio" id="custom" />
<label for="custom">Label</label>
</div>
3 - The content for the pseudo element is missing quotes.
4 - You aren't applying the styles to the after element of the label, you were applying them to the label directly:
input[type=radio]:checked + label{
content: \2022;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
Selects the label, while:
input[type=radio]:checked + label:after{
content: "\2022";
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
Selects the after element
Updated, working JSFiddle
Updated fiddle where I've added id for the radio and label needs
for="radioId"
to be able to work like that
also the label needs to be after the radio button
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js
I want to center the - text in the button, but I cannot find a way to do it.
html
<button class="round-button align-middle mr-1">
<span>-</span>
</button>
css
.round-button {
min-width: 20px;
max-height: 20px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding: 0;
}
.round-button:before {
content: "";
display: inline-block;
vertical-align: middle;
}
html
<button class="round-button align-middle mr-1">-</button>
css
.round-button {
min-width: 20px;
height: 20px;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 50%;
text-align: center;
padding: 0;
line-height: 20px; // to center text vertically
}
You just need to add the same line-height as your button's height and don't need an extra span element to add text. I've also removed unnecessary styles.
Try setting line-height: 20px to that. If it still looks off, you might be using a custom font with non-standard line height. In this case play with the line-height property until it looks okay.
Add the following style properties to .round-button:
.round-button {
display: flex;
align-items: center;
justify-content: center;
}
And, remove style for .round-button:before.
Try this.
.round-button {
background-color: #3498db;
border-style: none;
border-radius: 100%;
color: #fff;
cursor: pointer;
aspect-ratio: 1 / 1;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
<button class="round-button">
<span>-</span>
</button>
Try changing <span>-</span> to <span style="position:relative; left:0px; top:-3px">-</span>. If it doesn't look right you can play around with it.
THIS IS A DUPLICATE OF MY CLOSED QUESTION, BUT THE DUPLICATES ARE IRRELEVANT
First "duplicate"
It does not look at the class though, only the type, so if you happen to have non-articles with the same class you'll get unexpected results
Second "duplicate" is entirely something else.
Third "duplicate" is the explanation of why my try didn't work.
Fourth "duplicate" gives a workaround for the first element, not the last.
I have understood that there is no CSS selector for that, I juste want a solution. Be mindful of that before closing my question !
I have 5 buttons. They have an underlayer that make them seem they are active, as you will see in the snippet.
Each button can have an active state, but only starting from 1, and ending anywhere to 5.
They all have a divider, displayed in red in the snippet.
I would like to keep the divider into the underlayer, outside of the underlayer, but I would like to make it disappear at the end of the underlayer (in snippet, after button #2).
Following my first question, I understood that there is no CSS selector to do that. So what would be the best way to tackle this issue ?
.container {
display: flex;
align-items: stretch;
justify-content: start
margin: 12px;
position: relative;
}
button:after {
content: '';
height: 100%;
position: absolute;
background: red;
left: calc(100% + 12px);
width: 1px;
top: 0;
}
button.active:last-child:after {
content: none;
}
button {
flex: 0 0 calc(20% - 24px);
border: 0;
height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
margin-right: 24px;
background: transparent;
position: relative;
}
button.active {
color: white;
}
.active-pill {
background: teal;
position: absolute;
height: 32px;
border-radius: 16px;
background: teal;
width: calc(40% - 12px);
z-index: -1;
}
<div class="container">
<div class="active-pill"></div>
<button class="active">Step 1</button>
<button class="active">Step 2</button>
<button>Step 3</button>
<button>Step 4</button>
<button>Step 5</button>
</div>
<h3>
Which selector to use to remove the content after button #2 ?
</h3>
In this particular case: Just put the divider on the left side of the buttons, instead of the right?
Then the one that doesn’t need one, becomes the first non-active one after the active ones, so it can easily be selected using button.active + button:not(.active):after
The first button here technically has a divider to the left as well then, that gets cut off here when the snippet gets rendered anyway. But in a situation where you’d need to explicitly “eliminate” it, you could still go with just plain and simple :first-child here (I’m assuming if there’s active buttons, it always starts with the first one, right?)
This is a bit similar to what Hao suggested in their answer, but with their version, the divider gets placed on the right on some buttons, on the left on others … I’d prefer to simply have it the same on all.
.container {
display: flex;
align-items: stretch;
justify-content: start
margin: 12px;
position: relative;
}
button:after {
content: '';
height: 100%;
position: absolute;
background: red;
right: calc(100% + 12px);
width: 1px;
top: 0;
}
button.active + button:not(.active):after {
content: none;
}
button {
flex: 0 0 calc(20% - 24px);
border: 0;
height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
margin-right: 24px;
background: transparent;
position: relative;
}
button.active {
color: white;
}
.active-pill {
background: teal;
position: absolute;
height: 32px;
border-radius: 16px;
background: teal;
width: calc(40% - 12px);
z-index: -1;
}
<div class="container">
<div class="active-pill"></div>
<button class="active">Step 1</button>
<button class="active">Step 2</button>
<button>Step 3</button>
<button>Step 4</button>
<button>Step 5</button>
</div>
<h3>
Which selector to use to remove the content after button #2 ?
</h3>
Unfortunately, in pure css there is no way to select the last element with a specific class.
There are loads of possible solutions to your issue however. To name a few:
Since you can define your own tag-names in HTML5, you can rename the button elements with the active class to activebutton. That way you can target them with the :last-of-type selector. This might be the closest to what you are trying here. You could get rid of the underlayer as well...
You could indicate the active element in it's parent. In this case the container, and target the nth child.
You could add an extra class to the last active element in your html
You could go the javascript route...
.container {
display: flex;
align-items: stretch;
justify-content: start
position: relative;
margin-bottom: 12px;
}
button ,
buttona,
span{
padding: 0 50px;
border: 0;
height: 32px;
font-family: 'system-ui';
font-size: 11px;
line-height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
background: transparent;
position: relative;
}
buttona,
span{
background: teal;
color: white;
}
button:after,
buttona:after,
span:after{
content: '';
height: 100%;
position: absolute;
background: red;
right: 0;
width: 1px;
top: 0;
}
buttona:first-of-type,
span:first-of-type{
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
buttona:last-of-type,
span:last-of-type{
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
buttona:last-of-type:after,
span:last-of-type:after{
display: none;
}
<div class="container">
<buttona>1</buttona>
<buttona>2</buttona>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<button>4</button>
<button>5</button>
</div>
I am trying to override checkbox css in angular.js .It works fine for normal javascript code.
Plunker : https://plnkr.co/edit/gkWm0lgEZ7N88TINcsRS?p=preview
If you remove the css it works fine.
<input type="checkbox" ng-model="checkboxModel.value1" >
CSS:
input[type=checkbox]:checked + label:before {
content: '';
text-shadow: 1px 1px 1px #10758C;
font-size: 24px;
color: #f3f3f3;
text-align: center;
line-height: 24px;
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 28px;
margin-right: 12px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
}
input[type=radio], input[type=checkbox] {
display: none;
}
label:before {
font-weight: normal;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_1.gif?v1');
}
The issue is that the '+' css selector used, is unable to find any matching DOM i.e the label is wrapping the input and no label is present following/after the input, as per the DOM structure in the Plunker link .
Approach 1:
You could use the following DOM structure and modify your CSS to replace all occurrences of label to i
<label>
<input />
<i></i>
</label>
Approach 2:
You could use the following DOM structure and modify your CSS to replace all occurrences of label to input + label (To avoid css being applied to the wrapper label). [Note this approach needs the checkbox to have an id and for the label following it to have a for attribute.]
<label>
<input id="chk1" />
<label for="chk1"></label>
</label>
Hope this helps!
I have been 75% successful by looking at this post: How Do I Make a CSS Button Clickable
But still if the cursor comes in on the left the button is not clickable.
HTML
<span class="buy">Buy Tickets Now</span>
CSS
.buy {
float: left;
position: relative;
display: block;
width: 200px;
height: 27px;
text-align: center;
margin-left: -70px;
margin-top: 30px;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #ffffff;
background-color: #39b54a;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 15px;
}
.buy:hover {
background-color: #8dc63f;
}
Could someone help with what I got wrong?
http://christianfordlive.com
The problem is generated by the div mainImage and the left margin. The div mainPage is in front of your button, that's why you can't click on it.
You have two easy options to fix the bug:
1 - Remove the margin-left of your button
margin-left: 0px;
If you do it, the div mainImage will stop overlapping your span.
You can also modify the z-index of your button to force it to go to the front of the mainImage div. For example, just add it to your .buy class:
z-index: 1000;
Both options should fix your problem
First of all, your code is kind of a mess, and you are overruling properties inside the same rule. All you need is:
html:
<a class="buy" href="http://www.christianfordlive.com/buy-tickets/">Buy Tickets Now</a>
css:
.buy {
float: left;
position: relative;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 15px;
background-color: #39b54a;
padding: 15px 40px;
margin-top: 30px;
z-index: 100;
}
I'm having the following code:
<a class="my-profile" href="link">
<div class="my-picture">[picture]</div>
<div class="my-fields">
<span class="my-name">[name]</span>
<span class="my-medal">[medal]</span>
</div>
</a>
It has the following theming:
.my-profile {
background-color: black;
color: white;
display: inline-block;
height: 35px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.my-picture {
display: inline-block;
padding-top: 5px;
height: 25px;
width: 25px;
}
.my-fields {
display: inline-block;
font-size: 13px;
padding-left: 5px;
padding-top: 8px;
vertical-align: top;
}
.my-medal {
padding-left: 5px;
height: 16px;
width: 16px;
}
I'd like to add some more top padding to the medal field, but when I add padding-top: 5px to the .my-medal class, the name field is moved too.
Why does this happen and how can I prevent it?
Simply set vertical alignment to the top on both the .my-name and .my-medal elements:
.my-name, .my-medal {
vertical-align: top;
}
JSFiddle demo.
(Note that to show this working I've had to also specify display: inline-block as you haven't provided any styling for those two elements in your question).