I"ve created a dummy registration form in HTML and added some CSS
and the label tag which i used is aligned to the left corresponding to the input
and
I want to align this label into top of the input form when the width is
like this
#media (max-width:520px)
to make this responsive
I've tried display block but it does not work
like this when width is below 520px
Here's the Code
HTML
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>This</title>
<link rel="stylesheet" href="style4.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
<body>
<div id="fmr">
<div class="titl">Registration Form</div>
<form action="info.php">
<div class="input_fld">
<label>First Name : </label>
<input type="text" />
</div>
<div class="input_fld">
<label>Last name : </label>
<input type="text" />
</div>
<div class="input_fld">
<label> Email Address : </label>
<input type="email" />
</div>
<div class="input_fld">
<label>Gender : </label>
<div class="slgn">
<select name="gender" id="gender">
<option value="select">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="input_fld">
<label for="idc"> Phone Number:</label>
<input type="tel" pattern="[+]{0-2}{0-12}" />
</div>
<div class="input_fld">
<label for="ide"> Address : </label>
<textarea class="address"></textarea>
</div>
<div class="input_sl">
<label class="chckbx">
<input type="checkbox" />
<i class="fa-regular fa-square"></i>
<i class="fa-solid fa-square-check"></i>
<span class="ttbx"> Do you agree to the terms and conditions </span>
</label>
</div>
<div class="input_fld">
<input type="submit" value="Register" class="btn" />
</div>
</form>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
*{
margin: 0;
padding: 0;
font-family: TitilliumWeb,sans-serif;
box-sizing: border-box;
}
body{
background-color: rgb(149, 101, 82);
padding: 0 10px;
}
.titl{
display: block;
font-size: 20px;
font-weight:bold;
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 7px;
}
form {
width: 100%;
}
#fmr{
box-shadow: 2px 2px 4px 3px rgba(36, 36, 36, 0.704);
background-color: rgb(181, 175, 169);
width: 50%;
max-width: 500px;
margin: 50px auto;
padding: 25px;
text-align: center;
border-radius: 8px;
}
.input_fld{
margin-bottom: 17px;
margin-right: 5px;
margin-left: 0;
display: flex;
align-items: center;
}
.input_fld > label{
display: flex;
width: 200px;
margin-right: 40px;
font-size: 17px;
}
.slgn{
position: relative;
width: 100%;
height: 5vh;
}
.slgn select{
appearance:none;
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
outline: none;
width: 100%;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
.slgn:before{
content: "";
position: absolute;
top: 13px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent ;
pointer-events: none;
}
.slgn select:focus {
border: 3px solid #fec107;
animation: 0.8s ease;
}
input[type="text"] {
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
width: 100%;
margin: 5px auto;
height: 6vh;
background-color: none;
border: none;
outline: none;
padding: 8px 10px;
border-radius: 3px;
font-size: 15px;
transition: all 0.3s ease;
}
input[type="text"]:focus {
border: 3px solid #fec107;
animation: 0.8s ease;
}
input[type="tel"] {
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
text-decoration: none;
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 5.5vh;
padding: 8px 10px;
border-radius: 3px;
font-size: 16px;
transition: all 0.3s ease;
}
input[type="tel"]:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
input[type="email"]{
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 6vh;
padding: 8px 10px;
border-radius: 3px;
font-size: 15px;
transition: all 0.3s ease;
}
input[type="email"]:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
.input_fld textarea{
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);;
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 88px;
resize: none;
border-radius: 3px;
font-size: 17px;
padding:10px 13px;
}
.input_fld textarea:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
input[type="checkbox"], .chckbx .fa-square-check {
display: none;
}
.fa-square{
font-size: 1.3em;
}
input[type="checkbox"]:checked ~ .fa-square-check {
display: inline-block;
font-size: 1.3em;
}
input[type="checkbox"]:checked ~ .fa-square {
display: none;
}
.chckbx i:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
i {
margin-right: 3px;
}
.ttbx{
cursor: pointer;
font-size: 18.8px;
margin-left: 5px;
margin-right: 74px;
}
.input_fld .btn{
width: 100%;
padding: 9px 11px;
font-size: 19px;
border: 0px;
background: #6b8669;
color: #343533;
cursor: pointer;
border-radius: 4px;
outline: none;
margin: 10px 0 auto;
}
.input_fld:last-child{
margin-bottom: 0;
}
#media (max-width:520px) {
.fmr form .input_fld{
flex-direction: column;
align-items: flex-start;
}
.fmr .input_fld label{
display: block;
}
.fmr form .input_fld{
flex-direction: row;
}
}
Thank You
Here you can see
You can access the id via #element_id.
#media (max-width:520px) {
#fmr form .input_fld{
flex-direction: column;
align-items: flex-start;
}
}
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
*{
margin: 0;
padding: 0;
font-family: TitilliumWeb,sans-serif;
box-sizing: border-box;
}
body{
background-color: rgb(149, 101, 82);
padding: 0 10px;
}
.titl{
display: block;
font-size: 20px;
font-weight:bold;
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 7px;
}
form {
width: 100%;
}
#fmr{
box-shadow: 2px 2px 4px 3px rgba(36, 36, 36, 0.704);
background-color: rgb(181, 175, 169);
width: 50%;
max-width: 500px;
margin: 50px auto;
padding: 25px;
text-align: center;
border-radius: 8px;
}
.input_fld{
margin-bottom: 17px;
margin-right: 5px;
margin-left: 0;
display: flex;
align-items: center;
}
.input_fld > label{
display: flex;
width: 200px;
margin-right: 40px;
font-size: 17px;
}
.slgn{
position: relative;
width: 100%;
height: 5vh;
}
.slgn select{
appearance:none;
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
outline: none;
width: 100%;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
.slgn:before{
content: "";
position: absolute;
top: 13px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent ;
pointer-events: none;
}
.slgn select:focus {
border: 3px solid #fec107;
animation: 0.8s ease;
}
input[type="text"] {
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
width: 100%;
margin: 5px auto;
height: 6vh;
background-color: none;
border: none;
outline: none;
padding: 8px 10px;
border-radius: 3px;
font-size: 15px;
transition: all 0.3s ease;
}
input[type="text"]:focus {
border: 3px solid #fec107;
animation: 0.8s ease;
}
input[type="tel"] {
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
text-decoration: none;
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 5.5vh;
padding: 8px 10px;
border-radius: 3px;
font-size: 16px;
transition: all 0.3s ease;
}
input[type="tel"]:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
input[type="email"]{
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 6vh;
padding: 8px 10px;
border-radius: 3px;
font-size: 15px;
transition: all 0.3s ease;
}
input[type="email"]:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
.input_fld textarea{
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);;
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 88px;
resize: none;
border-radius: 3px;
font-size: 17px;
padding:10px 13px;
}
.input_fld textarea:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
input[type="checkbox"], .chckbx .fa-square-check {
display: none;
}
.fa-square{
font-size: 1.3em;
}
input[type="checkbox"]:checked ~ .fa-square-check {
display: inline-block;
font-size: 1.3em;
}
input[type="checkbox"]:checked ~ .fa-square {
display: none;
}
.chckbx i:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
i {
margin-right: 3px;
}
.ttbx{
cursor: pointer;
font-size: 18.8px;
margin-left: 5px;
margin-right: 74px;
}
.input_fld .btn{
width: 100%;
padding: 9px 11px;
font-size: 19px;
border: 0px;
background: #6b8669;
color: #343533;
cursor: pointer;
border-radius: 4px;
outline: none;
margin: 10px 0 auto;
}
.input_fld:last-child{
margin-bottom: 0;
}
#media (max-width:520px) {
#fmr form .input_fld{
flex-direction: column;
align-items: flex-start;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>This</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
<body>
<div id="fmr">
<div class="titl">Registration Form</div>
<form action="info.php">
<div class="input_fld">
<label>First Name : </label>
<input type="text" />
</div>
<div class="input_fld">
<label>Last name : </label>
<input type="text" />
</div>
<div class="input_fld">
<label> Email Address : </label>
<input type="email" />
</div>
<div class="input_fld">
<label>Gender : </label>
<div class="slgn">
<select name="gender" id="gender">
<option value="select">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="input_fld">
<label for="idc"> Phone Number:</label>
<input type="tel" pattern="[+]{0-2}{0-12}" />
</div>
<div class="input_fld">
<label for="ide"> Address : </label>
<textarea class="address"></textarea>
</div>
<div class="input_sl">
<label class="chckbx">
<input type="checkbox" />
<i class="fa-regular fa-square"></i>
<i class="fa-solid fa-square-check"></i>
<span class="ttbx"> Do you agree to the terms and conditions </span>
</label>
</div>
<div class="input_fld">
<input type="submit" value="Register" class="btn" />
</div>
</form>
</div>
</body>
</html>
Related
I want to make my html/css search bar responsive for example iphone 11.
Search button drops down after hovering over it, when i open it from my phone.
Here's the link: https://irinachikviladze.github.io/
How can I make it responsive using CSS?
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
So just overwrite the default display for your search box and set it to flex with flex-direction: row;
that's it.
body{
margin: 0;
padding: 0;
background:#e74c3c;
}
.search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #34495e;
height: 40px;
border-radius: 40px;
padding: 10px;
display: flex;
flex-direction: row;
}
.search-box:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn{
background : white ;
}
.search-btn{
color: #e74c3c;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background:#34495e;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
overflow: hidden;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
/* responsive*/
#media only screen and (max-width: 828px){
.search-box:hover > .search-txt{
width: 125px;
}
}
<body>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</body>
Html element
<div class="Card">
<div class="CardInner">
<label>Search for your stack :)</label>
<div class="container">
<div class="Icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#657789" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</div>
<div class="InputContainer">
<input placeholder="search here...."/>
</div>
</div>
</div>
</div>
CSS Element
#import url('https://fonts.googleapis.com/css?family=Orbitron&display=swap');
#import url('https://fonts.googleapis.com/css?family=Hind&display=swap');
* {
-webkit-font-smoothing: antialiased;
color: #acbdce;
}
:root {
--border-radius: 10px;
}
body, html {
background: #e2e9f4;
display: grid;
height: 100%;
grid-template: 1fr/100%;
place-items: center;
}
.Card {
padding: 1px;
border-radius: var(--border-radius);
background: linear-gradient(-67deg, rgba(#c8d8e7, .7), rgba(255,255,255,.8));
overflow: hidden;
box-shadow:
-2px -2px 6px rgba(#fff, .6),
2px 2px 12px #c8d8e7;
width: 380px;
}
.CardInner {
padding: 16px 16px;
background-color: #e2e9f4;
border-radius: var(--border-radius);
}
.container {
display: flex;
}
.Icon {
min-width: 46px;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
margin-right: 12px;
box-shadow:
-2px -2px 6px rgba(#fff, .6),
2px 2px 12px #c8d8e7;
svg {
transform: translate(-1px, -1px);
}
}
label {
font-family: "Hind", sans-serif;
display: block;
color: #3c4b66;
margin-bottom: 12px;
background: linear-gradient(45deg, rgba(#6b7b8f, 1), #3c4b66);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.InputContainer {
width: 100%;
}
input {
background-color: #e3edf7;
padding: 16px 32px;
border: none;
display: block;
font-family: 'Orbitron', sans-serif;
font-weight: 600;
color: #a9b8c9;
-webkit-appearance: none;
transition: all 240ms ease-out;
width: 100%;
&::placeholder {
color: #6d7f8f;
}
&:focus {
outline: none;
color: #6d7f8f;
background-color: lighten(#e3edf7, 3%);
}
};
.InputContainer {
--top-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3;
--bottom-shadow: inset -2px -2px 4px rgba(255,255,255, .7);
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
&:before,
&:after {
left: 0;
top: 0;
display: block;
content: "";
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
}
&:before {
box-shadow: var(--bottom-shadow);
}
&:after {
box-shadow: var(--top-shadow);
}
}
I've created a login form using html and css. Everything was okay but then there is a problem arises when I tried to resize the width and height of the window screen by cursor. Contents inside the form are overlapping each other when I'm resizing the window screen from the bottom by cursor. I've styled the display of the body as flex but I don't know why this is happening.
Before resizing the window screen
After resizing the window screen from bottom
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
height: 70%;
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Your .container and body heights are fixed values which means the content won't have any affect on their layout once you start reducing the height of the window.
Try using min-height instead to allow the content to affect their layout:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
min-height: 100vh; /** min-height used here instead */
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
min-height: 70%; /** min-height used here instead */
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I have created a custom search box with a font awesome info icon on the right side inside the search box. Hovering over this icon gives the user more information about the required input format. It does work nicely for Firefox and Safari (IE not tested), but in Google Chrome, the info icon gets positioned below the input box. Vertical position, however, is correct.
.SearchBox input {
flex: 1!important;
height: 35px!important;
margin: 0px 0 0 0!important;
z-index: 100!important;
background: #fcfcfc!important;
border-top: 1px solid #c4c4c4!important;
border-bottom: 1px solid #cecece!important;
border-left: 1px solid #cecece!important;
border-right: 1px solid #cecece!important;
margin-left: 0px!important;
font: inherit!important;
outline: none!important;
/* remove focus ring from Webkit */
line-height: 1.2!important;
padding: 5px!important;
padding-left: 12px!important;
padding-right: 36px!important;
width: 100%!important;
/* <-- Set size to 100% */
font-size: 15px!important;
transition: 0.15s ease-in!important;
}
.right-inner-addon {
position: relative!important;
}
.right-inner-addon input {
padding-right: 30px!important;
}
.right-inner-addon i {
position: absolute!important;
right: 1px!important;
padding: 10px 8px!important;
cursor: pointer!important;
}
.fa-searchinfo {
color: #808287!important;
font-size: 11.5pt!important;
}
.fa-searchinfo:hover {
color: #565859!important;
font-size: 11.5pt!important;
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<div class="SearchBox">
<div class="right-inner-addon">
<input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder="enter ID" value="" />
<a title="Some detailed information about possible input formats." class="fa-searchinfo"><i class="fa fa-info-circle" ></i></a>
</div>
</div>
Just replace .right-inner-addon i with below css :
.right-inner-addon a {
position: absolute!important;
right: 1px!important;
top:6px!important;
padding: 10px 8px!important;
cursor: pointer!important;
}
.SearchBox input {
flex: 1!important;
height: 35px!important;
margin: 0px 0 0 0!important;
z-index: 100!important;
background: #fcfcfc!important;
border-top: 1px solid #c4c4c4!important;
border-bottom: 1px solid #cecece!important;
border-left: 1px solid #cecece!important;
border-right: 1px solid #cecece!important;
margin-left: 0px!important;
font: inherit!important;
outline: none!important;
line-height: 1.2!important;
padding: 5px!important;
padding-left: 12px!important;
padding-right: 36px!important;
width: 100%!important;
font-size: 15px!important;
transition: 0.15s ease-in!important;
-webkit-transition: 0.15s ease-in!important;
-moz-transition: 0.15s ease-in!important;
-ms-transition: 0.15s ease-in!important;
}
.right-inner-addon {
position: relative!important;
}
.right-inner-addon input {
padding-right: 30px!important;
}
.right-inner-addon a {
position: absolute!important;
right: 1px!important;
top:6px!important;
padding: 10px 8px!important;
cursor: pointer!important;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="SearchBox">
<div class="right-inner-addon">
<input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder= "enter ID" value= "" />
<a title="Some detailed information about possible input formats." class = "fa-searchinfo" ><i class="fa fa-info-circle" ></i></a>
</div>
</div>
.SearchBox input {
flex: 1!important;
height: 35px!important;
margin: 0px 0 0 0!important;
z-index: 100!important;
background: #fcfcfc!important;
border-top: 1px solid #c4c4c4!important;
border-bottom: 1px solid #cecece!important;
border-left: 1px solid #cecece!important;
border-right: 1px solid #cecece!important;
margin-left: 0px!important;
font: inherit!important;
outline:none!important; /* remove focus ring from Webkit */
line-height: 1.2!important;
padding: 5px!important;
padding-left: 12px!important;
padding-right: 36px!important;
width: 100%!important; /* <-- Set size to 100% */
font-size: 15px!important;
transition: 0.15s ease-in!important;
}
.right-inner-addon {
position: relative!important;
}
.right-inner-addon input {
padding-right: 30px!important;
}
.span {
float: right;
margin-right: 6px;
margin-top:-30px;
position: relative;
z-index: 2;
color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="SearchBox">
<div class="right-inner-addon">
<input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder= "enter ID">
<a title="Some detailed information about possible input formats." class = "fa-searchinfo" ><i class="fa fa-info-circle span"></i></a>
</div>
</div>
I am making a responsive login page and i did everything correctly this is my html code
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
bottom: 0;
transform: translate(-0, 0);
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
When I resize the screen down to 730 pixel that works correct but my text in form-left-side goes up and there is not something that I can scroll and my text first lines are not visible
notice that i don't wanna take my min-height to lower and i want it to be 300 px if you can help me thank you
and loook also when it is runing on snippet on this site you can not scroll up so that is a problem
and my browser is opera
Your problem happens because you are absolutely positioning from the bottom of the page, changing it to top solves the problem. :)
Also you can add position: relative to your media query, to make sure it won't go out of screen. :)
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
top: 0;
transform: translate(0, 0);
position: relative;
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
I Googled for the above mentioned problem, but I still require the help from the stack overflow community.
In my login form, I am using font awesome icon. I have 2 input boxes for username and password respectively.
I want to display fa-user-cirle icon on top of the username input. The login form is displayed in a div as follows:
<div class="loginDiv">
<form>
<i class="fa fa-user-circle"></i>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<button mat-button (click)="submit()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
The CSS for icon is:
#import '~#angular/material/theming';
#include mat-core();
$yaana-app-primary: mat-palette($mat-orange, 800,400,200);
.firstDiv {
height: 40%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: orangered;
display: inline-block;
}
.secondDiv {
position: absolute;
width: 100%;
bottom: 0;
height: 60%;
left: 0;
right: 0;
background-color:whitesmoke;
display: inline-block;
}
.loginDiv {
border: 1px solid black;
background: white;
left: 50%;
position: absolute;
top: 28%;
transform: translate(-50%);
background-color: #fff;
padding: 15px;
box-shadow:1px 3px 10px rgba(0, 0, 0, 0.34);
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
width: 215px;
height: 36px;
line-height: 36px;
background: transparent;
border-radius: 3px;
will-change: transform;
-webkit-transition: all .2s ease;
transition: all .2s ease;
border: none;
/*border: 2px solid #FF5126;*/
cursor: pointer;
background: #F26722;
font-size: 16px;
color: #fff;
outline: none;
text-align: center;
padding: 0 6px;
margin: 6px 8px;
font-size: 14px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
text-transform: uppercase !important;
}
button:hover {
opacity: 0.8;
}
.loginImgContainer {
display: table;
max-height: 40px;
max-width: 40px;
}
i.fa {
background: #fff;
display: inline-block;
transform: scale(4,4);
border-radius: 50%;
}
The output I am getting is as follows:
But I want the icon to appear just above the username input and at the centre.
Please help me.
Adding this 'centericon' Class and css
.centericon{
font-size:36px;
position:absolute;
top:-18px;
left:50%;
transform:translate(-50%,0);
z-index:99;
background:white;
}
.firstDiv {
height: 40%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: orangered;
display: inline-block;
}
.secondDiv {
position: absolute;
width: 100%;
bottom: 0;
height: 60%;
left: 0;
right: 0;
background-color:whitesmoke;
display: inline-block;
}
.loginDiv {
border: 1px solid black;
background: white;
left: 50%;
position: absolute;
top: 28%;
transform: translate(-50%);
background-color: #fff;
padding: 15px;
box-shadow:1px 3px 10px rgba(0, 0, 0, 0.34);
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
width: 215px;
height: 36px;
line-height: 36px;
background: transparent;
border-radius: 3px;
will-change: transform;
-webkit-transition: all .2s ease;
transition: all .2s ease;
border: none;
/*border: 2px solid #FF5126;*/
cursor: pointer;
background: #F26722;
font-size: 16px;
color: #fff;
outline: none;
text-align: center;
padding: 0 6px;
margin: 6px 8px;
font-size: 14px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
text-transform: uppercase !important;
}
button:hover {
opacity: 0.8;
}
.loginImgContainer {
display: table;
max-height: 40px;
max-width: 40px;
}
.centericon{
font-size:36px;
position:absolute;
top:-18px;
left:50%;
transform:translate(-50%,0);
z-index:99;
background:white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="loginDiv">
<form>
<div class="centericon">
<i class="fa fa-user-circle"></i>
</div>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<button mat-button (click)="submit()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
Try with adding row above the container,
<div class="loginDiv">
<form>
<div class="row center">
<i class="fa fa-user-circle"></i>
</div>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<button mat-button (click)="submit()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
Thanks for giving me hint and found out the solution with following changes in css,
i.fa {
background: #fff;
display: inline-block;
font-size: 80px;
transform: translateY(-60%);
transform: translateX(160%);
border-radius: 50%;
}