This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 4 years ago.
input::before element not showing. I'm not sure why:
input::before {
content: "this is before";
position: absolute;
}
body {
background-color: Royalblue; /*#f0f0f0;*/
margin: 0px;
}
form {
position: relative;
top: 90px;
margin: 0 auto;
width: 280px;
height: 340px;
border: 1px solid #B0C4DE;
background: royalblue;
border-radius: 0px;
border-radius: 10px 10px 10px 10px;
}
/* Main EFFECT ================================ */
input {
position: relative;
top: 0px;
left: 0px;
font-family: 'Montserrat', sans-serif;
border: 0;
border-bottom: 1px solid black;
background: transparent;
font-size: 15px;
height: 25px;
width: 180px;
outline: 0;
z-index: 1;
color: black;
}
span {
position: absolute;
top: 7px;
left: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
/* z-index: 1; */
color: white;
transition: top .5s ease, font-size .5s ease;
}
input::before {
content: "this is before";
position: absolute;
}
.child {
position: relative;
width: 65%;
top: 30px;
margin: 0 auto;
/* margin-bottom: 30px;*/
}
<body>
<form class="parent">
<div class="child">
<input type="text" id="username" required />
<span>Username</span>
</div>
</form>
</body>
My understanding: input is a replaced element. By replaced I mean contents are replaced by the browser's default widget (here text box).
You can workaround this problem by using an wrapping element <input/>. Here is an example and its fiddle.
HTML
<span class="input-container">
<input type="text" id="username" required />
</span>
CSS
span.input-container:before {
content: "|";
border: 1px solid blue;
}
Please change values to suit your styles.
Fiddle: https://jsfiddle.net/4csrwy0f/7/
Related
I created a form submit on html/css... pls check it out in this link below
https://codepen.io/letsimoo/pen/PobxGRG
HTML Code
<form action="">
<div class="container">
<input class="required-input" type="text" id="name" required />
<label class="required-label" for="name">Name:</label>
</div>
<div class="container">
<input class="required-input" type="text" id="email" required />
<label class="required-label" for="email">Email:</label>
</div>
<div class="container" >
<input class="not-required-input" type="text" id="budget"/>
<label class="not-required-label" for="budget">Budget:</label>
</div>
<div class="container">
<input class="required-input" type="text" id="Message" required style="height: 100px"/>
<label class="required-label" for="Message">Message:</label>
</div>
<input type="submit" value="Submit">
</form>
CSS Code
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
* {
box-sizing: border-box;
}
/*Just to center the Form*/
form {
height: 100%;
width: 400px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* A container to position LABELS */
.container {
position: relative;
/* top: auto;
left: auto;
width: auto; */
}
.required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
/* I put label on top of the input*/
.required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
/* making exception for Budget */
.not-required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
.not-required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
.required-input:focus ~ .required-label,
.required-input:valid ~ .required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
/* making exception for Budget */
.not-required-input:focus ~ .not-required-label,
.not-required-input:invalid ~ .not-required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
.required-input:valid ~ .required-label {
color: #497495;
}
.required-input:focus:invalid ~ .required-label {
color: red;
}
.required-input:required ~ .required-label::before {
content: "*";
color: red;
}
.required-input:required:valid ~ .required-label::before {
color: #497495;
}
The only issue that I'm facing in this form is when selecting the (not-required) field which is (Budget) as you saw in the link after finish writing in that field or after it get unfocused, the label back to its old position and value!
Can you help me to figure out where is the mistake in the elements selection and what shall I do instead please?
Ps. when I set the input restriction of (Budget) to *required it will not have any problem!
You have :invalid for an element that can't be invalid. Since it doesn't have required, it will always come out as invalid. My answer comes from this blog.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
* {
box-sizing: border-box;
}
/*Just to center the Form*/
form {
height: 100%;
width: 400px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* A container to position LABELS */
.container {
position: relative;
/* top: auto;
left: auto;
width: auto; */
}
/* making exception for Budget */
.not-required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
.not-required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
/* making exception for Budget */
.not-required-input:focus ~ .not-required-label,
.not-required-input:invalid ~ .not-required-label,
.not-required-input:not(:placeholder-shown) ~ .not-required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
<form action="">
<div class="container" >
<input class="not-required-input" type="text" id="budget" placeholder=""/>
<label class="not-required-label" for="budget">Budget:</label>
</div>
<input type="submit" value="Submit">
</form>
What I have done is add .not-required-input:not(:placeholder-shown) ~ .not-required-label to your CSS and placeholder="" to the HTML. Of course, placeholders disappear when the user types into the input, so the pseudo :not(:placeholder-shown) will fire when user types into the input. I have only tested this in Firefox but it should work for all browsers. If needed, you can add a space into the placeholder for cross-browser support.
This question already has an answer here:
How do I make :after box same size as parent and responsive? transform: scale(1) works, but why?
(1 answer)
Closed 2 years ago.
I have created a simple responsive login form. That allows the user to log-in and reset password. When filling out the username/password fields, both of these fields are mixed together and not on seperate lines. I have checked to see if the CSS layout was correct but I cannot seem to find a reason as to why the username and password fields do this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(backgroundTwo.jpg) no-repeat center;
background-size: cover;
font-family: sans-serif;
}
.login {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.form {
position: relative;
width: 100%;
max-width: 380px;
padding: 80px 40px 40px;
background: rgba(0, 0, 0, 0.7);
border-radius: 10px;
color: #fff;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}
.form::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
pointer-events: none;
}
.form img {
position: absolute;
top: -50px;
left: calc(50% - 50px);
width: 100px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
.form h2 {
text-align: center;
letter-spacing: 1px;
margin-bottom: 2rem;
color: #ff652f;
}
.form .input input {
width: 100%;
padding: 10px 0;
font-size: 1rem;
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background-color: transparent;
color: indianred;
}
.form .input label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 1rem;
pointer-events: none;
transition: .3s ease-out;
}
.form .input input:focus+label .form .input input:valid+label {
transform: translateY(-18px);
color: #ff652f;
font-size: .8rem;
}
.submit-button {
display: block;
margin-left: auto;
border: none;
outline: none;
background: #ff652f;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.forgot-password {
color: inherit;
}
#forgot-password {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
height: 0;
z-index: #fff;
opacity: 0;
transition: 0.6s;
}
#forgot-password:target {
height: 100%;
opacity: 1;
}
.close {
position: absolute;
right: 1.5rem;
top: 0.5rem;
font-size: 2rem;
font-weight: 900;
text-decoration: none;
color: inherit;
}
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="LoginTwo.css">
<title>LoginFormTwo</title>
</head>
<body>
<div class="login">
<form action="" class="form">
<img src="avatarTwo.jpg" alt="">
<h2>Login</h2>
<div class="input">
<input type="text" name="loginUser" id="loginUser">
<label for="loginUser">User Name</label>
</div>
<div class="input">
<input type="password" name="loginPassword" id="loginPassword">
<label for="loginPassword">password</label>
</div>
<input type="submit" value="login" class="submit-button">
Forgot Password?
</form>
<div id="forgot-password">
<form action="" class="form">
×
<h2>Reset Password</h2>
<div class="input">
<input type="email" name="email" id="email" required>
<label for="email">Email</label>
</div>
<input type="submit" value="Submit" class="submit-button">
</form>
</div>
</div>
</body>
</html>
The problem I see here is that you didn't set a position: relative; to the <div> with class .input.
Since you set a position: absolute; to the label, its positioning is calculated from the closest parent with a position: relative; set. In your case, it's the <form> with class .form
Try adding these changes:
.form .input {
position: relative;
}
and adjust the top property of the label:
.form .input label {
top: -30px;
}
Here's a working Codepen
Hope this helps!
It's because your form is set to absolute so your labels are relative to the form.
By putting top: 0; your labels will be on top of the form. You can fix this by changing the .input position to relative like so:
.input {
position: relative;
}
And you can change the labels position by modifying the top value
.form .input label {
top: -25px /*or any value you want*/
}
I am trying to create input fields that look like this
which is easy enough because I can add a white background to the label with some padding. The problem is when the field appears on a non-white background like this
Is there any way to accomplish this with a transparent background on the label?
https://jsfiddle.net/jgu61qaq/
<div class="floating-label bg-white">
<label>Label</label>
<input type="text" value="Something">
</div>
<div class="floating-label bg-gray">
<label>Label</label>
<input type="text" value="Something">
</div>
<style>
.floating-label {
padding: 20px;
position: relative;
font-family: Arial, sans-serif;
}
.bg-white {
background: #fff;
}
.bg-gray {
background: #eee;
}
input {
padding: 5px 10px;
font-size: 14px;
}
label {
font-size: 11px;
position: absolute;
top: 15px;
left: 25px;
background: #fff;
padding: 0 5px;
}
</style>
Maybe something like this?:
label {
position: relative;
top: -16px;
left: 46px;
z-index: 0;
}
label:before {
z-index: -1;
content: '';
display: block;
width: 100%;
height: 50%;
background-color: #fff;
position: absolute;
top: 50%;
margin-top: -1px;
}
https://jsfiddle.net/jgu61qaq/3/
I used :before selector to create a white 50% height of label element to hide the border
body{
background-color:#ececec;
}
fieldset{
padding: 0;
width: 0;
background-color: #FFF;
border: 1px solid gray;
}
fieldset input{
border:none;
margin-top:-10px;
height:25px;
background-color:transparent;
}
<fieldset>
<legend>Lorem Ipsum:</legend>
<input type="text">
</fieldset>
I am trying to code an input box like in the image below.
However, I only end up with part of the lines with the current code.
When it's a button rather than an edit, everything in fine.
.sidebar-search input {
display: inline-block;
border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
border-style: solid none solid solid;
border-width: 2px 0 2px 0px;
color: #ffd717;
padding: 15px 25px;
position: relative;
overflow: hidden;
}
.sidebar-search input::before,
.sidebar-search input::after {
content: '';
width: 2px;
height: 160%;
position: absolute;
top: -30%;
background-color: #FFD717;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 9999;
}
.sidebar-search input::before {
left: 10%;
}
.sidebar-search input::after {
right: 10%;
}
<div class="right-sidebar-area">
<div class="single-right-sidebar">
<div class="sidebar-search">
<input type="text" name="Search">
</div>
</div>
</div>
You are very close. It looks like ::before and ::after pseudo-selectors don't work for input elements, so apply it directly to sidebar-search and add more styles to that div
.sidebar-search {
/*specify positioning, height and width */
position: relative;
height: 50px;
width: 175px;
}
.sidebar-search input {
display: inline-block;
border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
border-style: solid none solid solid;
border-width: 2px 0 2px 0px;
color: #ffd717;
padding: 15px 25px;
position: relative;
top: 5px;
overflow: hidden;
}
.sidebar-search::before,
.sidebar-search::after {
content: '';
width: 2px;
height: 160%;
position: absolute;
top: -30%;
background-color: #FFD717;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 9999;
}
.sidebar-search::before {
left: 10px; /*these values are more accurate according to the picture */
}
.sidebar-search::after {
right: 10px; /*these values are more accurate according to the picture */
}
<div class="right-sidebar-area">
<div class="single-right-sidebar">
<div class="sidebar-search">
<input type="text" name="Search">
</div>
</div>
</div>
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I am writing simple application that has a login form and I want to make the username and password fields more fancy. And more specifically something like this:
This is from a picture. If it was on the web I would check the html but it was not. I wonder if someone could help with the css because I am not very confident using CSS.
You could use a pseudo element for this:
.input {
margin: 5px;
width: 300px;
height: 30px;
position: relative;
border: 2px solid black;
border-radius: 5px;
}
.label {
display: inline-block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 45%;
background: black;
color: white;
text-align: center;
line-height: 30px;
}
.label:after {
content: "";
position: absolute;
right: -15px;
top: 5px;
height: 0%;
border-left: 15px solid black;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
z-index: 8;
}
.input input[type="text"] {
position: absolute;
height: 100%;
width: 50%;
left: 50%;
padding: 0;
border: none;
outline: none;
}
<div class="input">
<div class="label">Username</div>
<input type="text" placeholder="input here" />
</div>
<div class="input">
<div class="label">Password</div>
<input type="text" placeholder="input here" />
</div>