I want to display radio buttons as tabs. Following this codepen, I've attempted this in my project. But when I click on pseudo tab, nothing happens. It doesn't get checked.
How can I achieve the effect?
input.tgl-radio-tab-child {
position: absolute;
left: -99999em;
top: -99999em;
opacity: 1;
z-index: 1;
}
input.tgl-radio-tab-child+label {
cursor: pointer;
float: left;
border: 1px solid #aaa;
margin-right: -1px;
padding: .5em 1em;
position: relative;
}
input.tgl-radio-tab-child+label:hover {
background-color: #eee;
}
[type=radio]:checked+label {
background-color: #c30;
z-index: 1;
}
<label for="abc">ABC<span style="color: red;">*</span></label>
<div class="form-check">
<div class="tgl-radio-tabs">
<input type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label class="radio-inline">ABCDEFGHIJKL</label>
<input type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label class="radio-inline">MNOPQRSTUVWXYZ</label>
</div>
</div>
You need to bind your labels to your inputs via the for attribute which should reference the respective input's ID:
input.tgl-radio-tab-child {
position: absolute;
left: -99999em;
top: -99999em;
opacity: 1;
z-index: 1;
}
input.tgl-radio-tab-child+label {
cursor: pointer;
float: left;
border: 1px solid #aaa;
margin-right: -1px;
padding: .5em 1em;
position: relative;
}
input.tgl-radio-tab-child+label:hover {
background-color: #eee;
}
[type=radio]:checked+label {
background-color: #c30;
z-index: 1;
}
<label for="abc">ABC<span style="color: red;">*</span></label>
<div class="form-check">
<div class="tgl-radio-tabs">
<input id="x" type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label for="x" class="radio-inline">ABCDEFGHIJKL</label>
<input id="y" type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label for="y" class="radio-inline">MNOPQRSTUVWXYZ</label>
</div>
</div>
Related
My search suggestion box is not flowing all the way into the section below rather it is resizing the whole navbar. The search input is in the navigation bar. I want the search suggestions to just flow in the divs below. I have tried all the overflow property values but it is not giving me what I want.
.search-box {
position: relative;
}
.nav-search {
width: 260px;
}
.autocom-box {
background-color: white;
color: black;
width: 260px;
/* padding: 10px 8px; */
max-height: 280px;
overflow-y: auto;
border-radius: 5px;
/* opacity: 0; */
/* pointer-events: none; */
}
.search-box li {
list-style: none;
padding: 8px 12px;
cursor: default;
border-radius: 3px;
width: 100%;
/* display: none; */
overflow: auto;
}
.search-box li:hover {
background: #efefef;
}
.search-btn {
height: 38px;
width: 38px;
line-height: 38px;
position: absolute;
top: 0;
right: 0;
text-align: center;
cursor: pointer;
color: black;
margin-right: 10px;
border: none;
background: none;
}
<form class="d-flex ms-auto" action="/" method="post">
<div class="search-box">
<input
class="form-control me-2 nav-search"
autocomplete="off"
name="search"
placeholder="Type to Search..."
/>
<div class="autocom-box">
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
</div>
<button class="search-btn" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
I've tried giving the full navbar max-height but then it tries to keep everything inside of it so it just pushes the search-box so high up it disappears.
And I've also tried position: absolute; but even that doesn't work it just messes everything up.
Adding position: absolute; to the pop-out window (.autocom-box) should just about do the trick:
.search-box {
position: relative;
border: 2px solid black;
}
.nav-search {
width: 260px;
}
.autocom-box {
position: absolute; /* This is the change */
background-color: white;
border: 2px solid red;
color: black;
width: 260px;
/* padding: 10px 8px; */
max-height: 280px;
overflow-y: auto;
border-radius: 5px;
/* opacity: 0; */
/* pointer-events: none; */
}
.search-box li {
list-style: none;
padding: 8px 12px;
cursor: default;
border-radius: 3px;
width: 100%;
/* display: none; */
overflow: auto;
}
.search-box li:hover {
background: #efefef;
}
.search-btn {
height: 38px;
width: 38px;
line-height: 38px;
position: absolute;
top: 0;
right: 0;
text-align: center;
cursor: pointer;
color: black;
margin-right: 10px;
border: none;
background: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<form class="d-flex ms-auto" action="/" method="post">
<div class="search-box">
<input
class="form-control me-2 nav-search"
autocomplete="off"
name="search"
placeholder="Type to Search..."
/>
<div class="autocom-box">
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
</div>
<button class="search-btn" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
(The black border is the nav bar itself, the red border is the search window)
I'm using the :focus property on an input so that when I click on it an effect occurs. However, even when I don't click on it, all the inputs have had the style contained within :focus applied as soon as I load the page.
.input-container {
position: relative;
}
.form {
background-color: white;
font-size: 16px;
overflow: hidden;
color: black;
border-radius: 10px;
width: 100%;
position: relative;
height: 100%;
padding-left: 7rem;
padding-right: 7rem;
padding-top: 5rem;
}
.form input {
outline: none;
position: relative;
margin: 0 auto;
width: 100%;
color: #595f6e;
padding-top: 30px;
border: none;
}
.form input:focus+.label-name .content-name,
.form input:valid+.label-name .content-name {
transform: translateY(-150%);
color: blue;
font-size: 14px;
}
.form input:focus+.label-name::after,
.form input:valid+.label-name::after {
transform: translateX(0%);
}
.form label {
position: absolute;
pointer-events: none;
bottom: 0px;
left: 0px;
width: 100%;
border-bottom: 2px solid black;
}
.form label::after {
content: "";
position: absolute;
left: 0px;
height: 100%;
width: 100%;
border-bottom: 3px solid blue;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.content-name {
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3 ease;
}
<div class="form">
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off">
<label for="name" class="label-name">
<span class="content-name">Name</span>
</label>
</div>
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off">
<label for="name" class="label-name">
<span class="content-name">Email</span>
</label>
</div>
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off">
<label for="name" class="label-name">
<span class="content-name">Message</span>
</label>
</div>
</div>
Does anyone know why this might be happening? Any help or suggestions are appreciated!
Since you need to test if there is text in the input, but want to wait until it's "valid" (this does not check to see if the actual data is valid, but rather that there is text). You can set the required attribute on the input fields. Technically, if there is no text in the input field, the field isn't "valid" until there is.
.input-container {
position: relative;
}
.form {
background-color: white;
font-size: 16px;
overflow: hidden;
color: black;
border-radius: 10px;
width: 100%;
position: relative;
height: 100%;
padding-left: 7rem;
padding-right: 7rem;
padding-top: 5rem;
}
.form input {
outline: none;
position: relative;
margin: 0 auto;
width: 100%;
color: #595f6e;
padding-top: 30px;
border: none;
}
.form input:focus+.label-name .content-name,
.form input:valid+.label-name .content-name {
transform: translateY(-150%);
color: blue;
font-size: 14px;
}
.form input:focus+.label-name::after,
.form input:valid+.label-name::after {
transform: translateX(0%);
}
.form label {
position: absolute;
pointer-events: none;
bottom: 0px;
left: 0px;
width: 100%;
border-bottom: 2px solid black;
}
.form label::after {
content: "";
position: absolute;
left: 0px;
height: 100%;
width: 100%;
border-bottom: 3px solid blue;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.content-name {
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3 ease;
}
<div class="form">
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off" required>
<label for="name" class="label-name">
<span class="content-name">Name</span>
</label>
</div>
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off" required>
<label for="name" class="label-name">
<span class="content-name">Email</span>
</label>
</div>
<div class="input-container u-margin-bottom-medium">
<input type="text" name="name" autocomplete="off" required>
<label for="name" class="label-name">
<span class="content-name">Message</span>
</label>
</div>
</div>
I'm trying to change the colour of radio buttons and button label when the radio button has been selected. Have tried this.
input[type='radio']:checked {
background: yellow !important;
}
<label
className='tag-item'
key={tag}
htmlFor={`filter-${tag}`}
clickable='true'>
<span>{tag}</span>
<input
type='radio'
name='tag'
id={`filter-${tag}`}
value={tag}
checked={tag === currentTag}
onChange={e => setCurrentTag(e.target.value)}
className='tag-radio'
/>
</label>
You can't change the default Radio button's color.
But you can do this with some trick.
input[type=radio]{
display: none;
}
.fake-radio{
position: relative;
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid gray;
border-radius: 100%;
}
.fake-radio::before{
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 6px;
height: 6px;
background-color: gray;
border-radius: 100%;
}
input[type=radio]:checked + .fake-radio{
border-color: red;
}
input[type=radio]:checked + .fake-radio::before{
background-color: red;
}
<label>
<span>Tag</span>
<input type="radio" />
<span class="fake-radio"></span>
</label>
I've been trying to customize the default radio button to look something like on/off button.
I've already created one using 2 images (using javascript) for an on and off state, but there's no animation for transition between the two states.
Is there a way to achieve this using pure css(+ animation)?
I need buttons like these-
Here you go you can also do this with checkbox
#mc, #mc2, #mc3 {
display: none;
}
.switch {
background: gray;
width: 40px;
height: 20px;
border-radius: 10px;
display: block;
position: relative;
margin: 10px;
}
.switch:hover {
cursor: pointer
}
.switch:after {
content: "";
height: 18px;
width: 18px;
border-radius: 9px;
display: block;
position: absolute;
top: 1px;
left: 1px;
background: lightblue;
transition: ease-out 0.5s;
}
input[type=radio]:checked + label:after,
input[type=checkbox]:checked + label:after{
left: calc(100% - 19px);
background: lightgreen;
}
<p>Radio</p>
<input type="radio" id="mc" name="Switch" />
<label class="switch" for="mc"></label>
<input type="radio" id="mc2" name="Switch" />
<label class="switch" for="mc2"></label>
<p>Checkbox</p>
<input type="checkbox" id="mc3" name="Switch" />
<label class="switch" for="mc3"></label>
To get transition between the two state (on/off), style the :checked pseudo class.
The :checked pseudo class matches every checked <input> element (radio, checkbox and option).
/* The container */
.switch {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: .5em;
width: 46px;
height: 24px;
}
/* Hide the browser's default radio */
.switch input[type=radio] {
position: absolute;
opacity: 0;
}
/* Create a custom switch */
.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
border: 1px solid #daa2e6;
transition: .2s;
}
/* Create the indicator/dot */
.switch .slider::before {
position: absolute;
top: 2px;
left: 4px;
content: "";
height: 18px;
width: 18px;
border-radius: 50%;
background-color: #bababa;
transition: .2s;
}
/* When the switch is checked, add a blue background */
.switch input[type=radio]:checked + .slider {
background-color: #007bff;
}
/* When the switch is checked, change position of the indicator/dot */
.switch input[type=radio]:checked + .slider::before {
background-color: #fff;
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px);
}
/* When the switch gets focus, add a shadow */
.switch input[type=radio]:focus + .slider {
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
border-color: #80bdff;
}
<p>
<label class="switch">
<input type="radio" name="country">
<span class="slider"></span>
</label> United States
</p>
<p>
<label class="switch">
<input type="radio" name="country">
<span class="slider"></span>
</label> Canada
</p>
<p>
<label class="switch">
<input type="radio" name="country" checked>
<span class="slider"></span>
</label> United Kingdom
</p>
<p>
<label class="switch">
<input type="radio" name="country">
<span class="slider"></span>
</label> India
</p>
I was looking for a good Material Design input tutorial - which I found here -, but when I tried to apply this in my code, the underlines don't match up.
The underline when focused is shorter than the regular border-bottom.
Here's the live example of what I mean: Codepen
And here's the code:
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: rgba(37, 116, 169, 0.50);
transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
<form>
<div class="group">
<input type="text" required>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
Is there anyone who knows why this happens?
You need to set the box-sizing:border-box; on the input elements:
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
box-sizing:border-box;
outline:none;
}
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: rgba(37, 116, 169, 0.50);
transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
<form>
<div class="group">
<input type="text" required>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
That, or set the width of the spans to about 315px which should match the width of the inputs when you factor in the border and padding.