I created radio buttons via css. Just styled on the pseudo-elements like this:
https://codepen.io/emily-green/pen/MWYQZqz
Here is the html
<label class="wrapper">
<input type="radio" />
<div class="label">Text</div>
</label>
<label class="wrapper wrapper--checked">
<input type="radio" />
<div class="label">Text</div>
</label>
Here is my css
input {
display: none
}
.wrapper {
font-family: "arial";
align-items: center;
color: #00f;
display: flex;
font-size: 12px;
font-weight: 600;
justify-items: center;
padding: .5rem 0 .5rem 1.3rem;
position: relative;
vertical-align: middle;
white-space: nowrap;
&::before,
&::after {
border-radius: 50%;
box-sizing: border-box;
content: '';
display: inline-block;
height: 14px;
left: 0;
position: absolute;
width: 14px;
}
&::before {
border: 2px solid #00f;
}
&::after {
background: #000;
transform: scale( 0 );
}
// checked
&--checked {
color: #000;
&::after {
transform: scale( .4 );
}
}
}
My problem:
When I zoom with the browser and on Windows Edge, the inner circle is misplaced or the outer circle gets oval. Does anyone have a solution for it?
I didn't found a solution for it so I changed it to an inline SVG. Inline because otherwise, the SVG get quite pixelated on some browsers
Related
I am looking for a help to adjust the height of range slider depends on the target value?
As much as the user will drag the ball of the range, the left side's height will increase. It will be like filling the range. Could you help me how I can achieve this like in the UI has attached to this post.
This is the UI
Here is my code below:
HTML:
<div class="range-container">
<input type="range" name="range" id="range" min="0" max="100" value="0" />
<label for="range">DRAG</label>
</div>
CSS:
.range-container {
position: relative;
display: flex;
align-items: center;
}
#range {
width: 80%;
margin: 90px auto;
-webkit-appearance: none;
}
#range:focus {
outline: none;
}
#range::-webkit-slider-runnable-track {
background: var(--theme-col);
width: 100%;
height: 3px;
cursor: pointer;
}
#range::-webkit-slider-thumb {
-webkit-appearance: none;
height: 12px;
width: 12px;
background: blue;
border-radius: 50%;
border: 1px solid blue;
margin-top: -4px;
cursor: pointer;
}
In a (React/TS) form i need to move the label for the inputfield when;
The input has the focus
When the placeholder is not shown
This works fine for the first objective (with .grid__item--fixedrowcolone), but i am unable to to realise this for the second. The input and the label are grid elements so i can place the input and label on top and vertically center both.
What i unsuccessfully tried is (multiple variants) of the snippet below.
.grid__item--fixedrowcolone {
&:not(~ .form__inputfield:placeholder-shown) {
color: green;
}
}
react form
<div className={styles.form__inputwrapper} data-testid='form-input'>
<div className={styles.form__inputsymbol} data-testid='form-input-icon'>
<img src={lockSvg} alt='lock' width='24' height='24' />
</div>
<div className={styles.grid__container} data-testid='form-input-field'>
<div className={styles['grid__item--fixedrowcolone']}>
<input
className={styles.form__inputfield}
type='text'
pattern='^.*{8,}'
id='pwd1'
name='pwd1'
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder=' '
required
data-testid='forminput-input'
/>
</div>
<div className={styles['grid__item--fixedrowcoltwo']}>
<label
className={styles.form__inputlabel}
htmlFor='pwd1'
data-testid='forminput-inputlabel'
>
wachtwoord
<span className={styles.form__inputlabelvalmsg}>
+312234
</span>
</label>
</div>
</div>
</div>
css module.scss
.grid {
&__container {
display: grid;
justify-items: stretch;
}
&__item {
&--fixedrowcolone, &--fixedrowcoltwo {
display: flex;
grid-column: 1;
grid-row: 1;
}
}
}
.form {
&__inputwrapper {
display: flex;
margin-bottom: 10px;
position: relative;
background: var(--theme_form_field_bg_color);
border-radius: 4px;
}
&__inputsymbol {
display: flex;
align-self: center;
//align-items: center;
padding-left: 10px;
pointer-events: none;
color: var(--theme_fg_color);
font-size: 1.5em;
transition: all 0.4s;
filter: var(--theme_fg_color_filter)
}
&__inputfield {
align-self: center;
//line-height: 1.2;
font-size: 1.5em;
height: 50px;
color: var(--theme_fg_color);
background: none;
outline: none;
border: none;
max-width: 280px;
min-width: 250px;
overflow: visible;
touch-action: manipulation;
}
&__inputlabel {
align-self: center;
//line-height: 1.2;
font-size: 1.5em;
transition: .3s all ease;
}
&__inputlabelvalmsg {
display: none;
}
}
.grid__item--fixedrowcolone {
&:focus-within ~ .grid__item--fixedrowcoltwo {
top: 5px;
font-size: .5em;
align-self: start;
}
}
Unfortunately it is yet not possible to select elements based on presence of child elements or child element pseudo selectors. So therefore i reverted back to absolute positioning to overlay two elements.
react form
<div className={styles.form__inputwrapper} data-testid='form-input'>
<div className={styles.form__inputsymbol} data-testid='form-input-icon'>
<img src={lockSvg} alt='lock' width='24' height='24' />
</div>
<div
className={styles.form__inputfieldwrapper}
data-testid='form-input-field'
>
<input
className={styles.form__inputfield}
type='text'
pattern='^.*{8,}'
id='pwd1'
name='pwd1'
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder=' '
required
data-testid='forminput-input'
/>
<label
className={styles.form__inputlabel}
htmlFor='pwd1'
data-testid='forminput-inputlabel'
>
wachtwoord
<span className={styles.form__inputlabelvalmsg}>
+31652693 of 0652786518
</span>
</label>
</div>
</div>
css module.scss
#mixin inputlabel-defaults() {
font-size: 1.5em;
align-self: center;
}
.form {
&__inputwrapper {
display: flex;
margin-bottom: 10px;
position: relative;
background: var(--theme_form_field_bg_color);
border-radius: 4px;
}
&__inputfieldwrapper {
display: flex;
}
&__inputsymbol {
display: flex;
align-self: center;
//align-items: center;
padding-left: 10px;
pointer-events: none;
color: var(--theme_fg_color);
font-size: 1.5em;
transition: all 0.4s;
filter: var(--theme_fg_color_filter)
}
&__inputlabel {
position: absolute;
transition: .3s all ease;
#include inputlabel-defaults();
}
&__inputlabelvalmsg {
display: none;
}
&__inputfield {
align-self: center;
//line-height: 1.2;
font-size: 1.5em;
height: 50px;
color: var(--theme_fg_color);
background: none;
outline: none;
border: none;
max-width: 280px;
min-width: 250px;
overflow: visible;
touch-action: manipulation;
&:focus-within ~ .form__inputlabel {
top: 5px;
font-size: .5em;
align-self: start;
}
&:not(:placeholder-shown) ~ .form__inputlabel {
color: red;
top: 5px;
font-size: .5em;
align-self: start;
}
&:placeholder-shown ~ .form__inputlabel {
top: unset;
#include inputlabel-defaults();
}
}
}
I'm looking to create a slidedown effect on checkbox check without JS, so pure css. The problem is we can't use JS on this page.
I've look on so many websites, but they all say something different and most do use JS.
My HTML:
<label>
<input class="open-content" type="checkbox">
<div class="label-container">
<div style="color: #EC008C; font-size: 20px; font-weight: 700;">Open this tab</div>
<div style="font-size: 32px; font-weight: 700;">+</div>
</div>
<div class="content-open fade-new">Show this content with slidedown</div>
</label>
My CSS:
<style type="text/css">
.open-content:checked ~ .content-open {
visibility: visible!important; max-height: none!important;
padding: 20px 0px 20px 20px;
margin-top: 30px;
}
.fade-new {
transition: visbility 0.3s ease-in-out, max-height 0.3s ease-in-out;
}
.content-open {
max-height: 0px;
visibility: hidden;
background-color: #F5F5F5;
}
</style>
And how it looks:
But it isn't animated. I used opacity 0 to 1 and that works to make a nice animation, but I prefer sliding down if that is possible with checkbox + pure CSS. Does anyone know how to do this?
Yes, it is possible to create a pure CSS slide-down using the checkbox hack.
In this example I have separated the <label> from the <input> and linked them by:
giving the <input> an id
giving the <label> a matching for attribute
Working Example (Version 1):
This version slides down.
.open-content {
display: none;
}
.label-text {
position: relative;
display: block;
z-index: 12;
height: 32px;
line-height: 32px;
padding: 6px;
color: #EC008C;
font-size: 20px;
font-weight: 700;
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.label-text::after {
content: '+';
display: inline;
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 700;
vertical-align: bottom;
}
.content {
position: relative;
display: inline-block;
z-index: 6;
padding: 6px;
background-color: #F5F5F5;
opacity: 0;
transform: translateY(-50px);
transition: all 0.6s linear;
}
.open-content:checked ~ .content {
opacity: 1;
transform: translateY(0);
}
<input id="open-content" class="open-content" type="checkbox">
<label class="label-text" for="open-content">
Open this tab
</label>
<div class="content">
<p>Show this content with slidedown</p>
</div>
Working Example (Version 2):
This version unfurls.
.open-content {
display: none;
}
.label-text {
position: relative;
display: block;
z-index: 12;
height: 32px;
line-height: 32px;
padding: 6px;
color: #EC008C;
font-size: 20px;
font-weight: 700;
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.label-text::after {
content: '+';
display: inline;
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 700;
vertical-align: bottom;
}
.content {
position: relative;
display: inline-block;
z-index: 6;
padding: 6px;
height: 0;
background-color: #F5F5F5;
opacity: 0;
overflow: hidden;
transition: all 0.6s linear;
}
.open-content:checked ~ .content {
opacity: 1;
height: 120px;
}
<input id="open-content" class="open-content" type="checkbox">
<label class="label-text" for="open-content">
Open this tab
</label>
<div class="content">
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
</div>
Further Reading:
The "Checkbox Hack" (and things you can do with it) - CSS Tricks
i hope it help you
you also can use css animation
.fade-new{
height:0;
background:red;
opacity:0;
transition:1s;
}
.open-content:checked ~ .fade-new{
height:300px;
opacity:1;
transition:1s;
}
<label>
<input class="open-content" type="checkbox">
<div class="label-container">
<div style="color: #EC008C; font-size: 20px; font-weight: 700;">Open this tab</div>
<div style="font-size: 32px; font-weight: 700;">+</div>
</div>
<div class="content-open fade-new">Show this content with slidedown</div></span>
</label>
I have a really quick question. I have developed this css and html with the help of a YouTube tutorial as well as the community. However, I do have a problem and I have spent a good hour trying to solve it but have had no luck. When I resize the window, the vertical line in the center of the page (div="splitter") disappears and there is no space on the left-hand side the input fields either. Can someone please explain why?
Also, if you guys would not mind how does my css code look? Is it correct?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* :focus {
outline: none;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
display: flex;
}
.login-form {
flex: 1;
justify-content: flex-end;
display: flex;
}
.login-form input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
padding-left: 60px;
margin-bottom: 10px;
width: 100%;
}
.login-form input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
font-size: 15px;
width: 300px;
font-weight: lighter;
}
form {
align-self: center;
}
.splitter {
background-color: grey;
width: 0.5px;
height: 180px;
align-self: center;
margin-right: 40px;
margin-left: 50px;
}
.side-text {
flex: 1;
align-self: center;
line-height: 30px;
}
.side-text h2 {
font-weight: normal;
}
.side-text p {
font-weight: lighter;
}
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" placeholder="Email" name="emailPost">
</div>
<div class="password-input-field">
<input type="password" placeholder="Password" name="passwordPost">
</div>
<div class="submit-button">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div class="splitter"></div>
<div class="side-text">
<h2>Cold Ops</h2>
<p>ADMINISTRATION PANEL</p>
</div>
</div>
You have 0.5px width on your splitter. I tried brining it up to 1px, but saw that it did not help. What did seem to work was setting min-width to 1px as well.
Your css looks OK, but I would suggest looking more into how flex-box works, here is a good article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The reason why there is no space on the left side is because you have not set any. Did you perhaps mean to set the margin-left to something instead of padding-left?
Perhaps it happens due to flexbox. I made it work via border. Now it works as expected since border isn't affected by possible dynamic width.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* :focus {
outline: none;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
display: flex;
}
.login-form {
flex: 1;
justify-content: flex-end;
display: flex;
}
.login-form input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
padding-left: 60px;
margin-bottom: 10px;
width: 100%;
}
.login-form input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
font-size: 15px;
width: 300px;
font-weight: lighter;
}
form {
align-self: center;
}
.splitter {
background-color: grey;
border-left: 1px solid black;
height: 180px;
align-self: center;
margin-right: 40px;
margin-left: 50px;
}
.side-text {
flex: 1;
align-self: center;
line-height: 30px;
}
.side-text h2 {
font-weight: normal;
}
.side-text p {
font-weight: lighter;
}
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" placeholder="Email" name="emailPost">
</div>
<div class="password-input-field">
<input type="password" placeholder="Password" name="passwordPost">
</div>
<div class="submit-button">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div class="splitter"></div>
<div class="side-text">
<h2>Cold Ops</h2>
<p>ADMINISTRATION PANEL</p>
</div>
</div>
I want to make a button to appear in the next line . But i tried to use the attributes "position" and "line-height" of the button but nothing is changed .i want it in the center of the next line under the input text of tne name
this is my code :
css file :
#popup {
font-family: 'Orbitron', serif;
font-size: 28px;
font-weight: 700;
text-shadow: 0px 1px 2px #fff;
color: #222;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popup h1 {
font-weight: 400;
}
#popup-box {
width: 400px;
height: 300px;
background: #ccc url(../images/popup_bg.jpg);
border-radius: 10px;
position: relative;
-webkit-box-shadow: 0 5px 5px #333;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popup-box small {
font-size: .6em; }
#popup.hide {
background: rgba(0,0,0,0);
visibility: hidden;
}
#popup.hide #popup-box{
margin-top: -800px;}
#popup-box a.button {
background: white;
border-radius: 10px;
display: block;
font-size: 30px;
margin: 230px auto 0;
padding: 10px;
width: 50px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;
cursor:pointer;}
html file :
<section id="popup">
<div id="popup-bg">
</div>
<div id="popup-box">
<p><a id="gamelogin1" class="button" href="">choose Name</a></p>
<p><a id="gamelogin2" class="button" href="">New Name</a></p>
</div>
</section>
<section id="popupName" class="hide">
<div id="popup-bg">
</div>
<div id="popup-box">
<label for="firstName">Your Name :</label>
<input type="text" name="firstName" size="20" maxlength="40" id="firstName" />
**<p><a id="validatelogin" class="button" href="">Validate</a></p> //this is the //button i want to change**
</div>
</section>
Add a break line (<br>) after your input field:
<input type="text" name="firstName" size="20" maxlength="40" id="firstName" /><br>
Some would argue that the <br> tag should self-close: <br />, but this isn't necessary.
To make it center, use this CSS:
#validatelogin {
width:100px;
margin: 0 auto;
}
Set width to the proper width of the button; it must be fixed in order for margin: 0 auto; to work.
I'm not sure if I understand your question but maybe you can use it before your button
<div class="both"></div>
In css
.both{
clear: both;
}
You just need
input[type=text]
{
display:block;
}
and
#validatelogin{
display:block;
}
in your CSS. That Would solve your Issue