I creating signup form. I ran into a problem. how to make input wider without fixed width like width: 420px. And input and label place in the center. I want something like this: image. But now I have this: image.
My html code:
<div className="container">
<h1 className="title">Create an account</h1>
<form className="form">
<div className="form-outline">
<label className="input-label">Your Name</label>
<input
name="username"
type="text"
className="input"
value={input.username}
onChange={onInputChange}
onBlur={validateInput}
/>
</div>
<div className="form-outline">
<label className="input-label">Your Email</label>
<input
name="email"
type="email"
className="input"
value={input.email}
onChange={onInputChange}
onBlur={validateInput}
/>
</div>
<div className="form-outline">
<label className="input-label">Password</label>
<input
name="password"
type="password"
className="input"
value={input.password}
onChange={onInputChange}
onBlur={validateInput}
/>
</div>
<div className="form-outline">
<label className="input-label">Repeat your password</label>
<input
name="confirmPassword"
type="password"
className="input"
value={input.confirmPassword}
onChange={onInputChange}
onBlur={validateInput}
/>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" />
<label className="form-check-label">
I agree all statements in
<a className="terms" href="/#">Terms of service</a>
</label>
</div>
<div className="button">
<button className="btn">Create account</button>
</div>
<p className="have-account">
Have already an account
<a className="login-here" href="/#">Login here</a>
</p>
</form>
My css code:
.container {
padding: 16px;
width: 80%;
margin: 5% auto 0 auto;
}
.title {
text-align: center;
font-size: 2.5rem;
color: #0d6efd;
}
.input-label {
color: #6c757d;
}
.form-outline {
margin-bottom: 1.5rem;
flex: 1 1 auto;
}
.input {
padding: 0.45rem;
margin: 0.3rem 0 1.3rem 0;
font-size: 1.25rem;
border-radius: 0.5rem;
display: block;
color: #212529;
line-height: 1.5;
border: 1px solid #ced4da;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.input:focus {
color: #212529;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-check {
margin-bottom: 3rem;
justify-content: center;
display: flex;
}
.form-check-label {
padding-left: 0.5rem;
font-size: 1.1rem;
}
.form-check-input {
border-radius: 0.25rem;
border: 1px solid #a9a9a9;
width: 1.3em;
height: 1.3em;
}
.form-check-input:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.terms {
color: #0d6efd;
text-decoration: underline;
padding-left: 0.2rem;
}
.terms:hover {
color: #0a58ca;
}
.button {
margin-bottom: 1.5rem;
justify-content: center;
display: flex;
}
.btn[disabled] {
opacity: .65;
cursor: not-allowed;
}
.btn {
cursor: pointer;
color: #fff;
background-color: #0d6efd;
border: none;
text-decoration: none;
padding: 0.5rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
border-radius: 0.375rem;
}
.have-account {
text-align: center;
font-size: 1.1rem;
}
.login-here {
color: #0d6efd;
font-weight: bold;
text-decoration: underline;
padding-left: 0.2rem;
}
.login-here:hover {
color: #0a58ca;
}
Edited:
Also I tried this:
.input-label {
color: #6c757d;
}
.form-outline {
margin-bottom: 1.5rem;
flex: 1 1 auto;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
but my label hit in the middle of the screen. image For label float: left not working. So I'm need to place label on the left side, and input make wider.
Just remove align-items
.form-outline {
margin-bottom: 1.5rem;
flex: 1 1 auto;
justify-content: center;
display: flex;
flex-direction: column;
}
Note : Set a break point for media as well as wider screens.
Edits: Please use this corrected css ,
.form {
max-width: 500px;
margin: 0 auto;
}
.container {
padding: 16px;
width: 80%;
margin: 5% auto 0 auto;
}
.title {
text-align: center;
font-size: 2.5rem;
color: #0d6efd;
}
.input-label {
color: #6c757d;
}
.form-outline {
margin-bottom: 1.5rem;
flex: 1 1 auto;
}
.input {
padding: 0.45rem;
margin: 0.3rem 0 1.3rem 0;
font-size: 1.25rem;
border-radius: 0.5rem;
display: block;
color: #212529;
line-height: 1.5;
border: 1px solid #ced4da;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
width:100%;
}
.input:focus {
color: #212529;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-check {
margin-bottom: 3rem;
justify-content: center;
display: flex;
}
.form-check-label {
padding-left: 0.5rem;
font-size: 1.1rem;
}
.form-check-input {
border-radius: 0.25rem;
border: 1px solid #a9a9a9;
width: 1.3em;
height: 1.3em;
}
.form-check-input:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.terms {
color: #0d6efd;
text-decoration: underline;
padding-left: 0.2rem;
}
.terms:hover {
color: #0a58ca;
}
.button {
margin-bottom: 1.5rem;
justify-content: center;
display: flex;
}
.btn[disabled] {
opacity: .65;
cursor: not-allowed;
}
.btn {
cursor: pointer;
color: #fff;
background-color: #0d6efd;
border: none;
text-decoration: none;
padding: 0.5rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
border-radius: 0.375rem;
}
.have-account {
text-align: center;
font-size: 1.1rem;
}
.login-here {
color: #0d6efd;
font-weight: bold;
text-decoration: underline;
padding-left: 0.2rem;
}
.login-here:hover {
color: #0a58ca;
}
Related
I created a createElement for the todo List and the appendchild but it's not adding to my website this is the code below
window.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector("#add-todo-form");
const input = document.querySelector("#new-todo-input");
const listTask = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
const task = input.value;
const todoList = document.createElement('div');
todoList.classList.add('todo-item');
const label = document.createElement('label');
const input = document.createElement('input');
const span = document.createElement('span');
label.appendChild(input);
label.appendChild(span);
const todoContent = document.createElement('div');
todoContent.classList.add('todo-content');
todoList.appendChild(todoContent);
const todoInput = document.createElement('input');
todoInput.classList.add('text');
todoInput.type = 'text'
todoInput.value = task;
todoInput.setAttribute('readonly', 'readonly');
todoContent.appendChild(todoInput);
const todoAction = document.createElement('div');
todoAction.classList.add('action');
const todoEdit = document.createElement('i');
todoEdit.classList.add('bi-pencil-square');
const todoDelete = document.createElement('i');
todoDelete.classList.add('bi-trash3-fill');
todoAction.appendChild(todoEdit);
todoAction.appendChild(todoDelete);
todoList.appendChild(todoAction);
listTask.appendChild(todoList);
input.value = '';
todoEdit.addEventListener('click', (e) => {
if (todoEdit.innerText.toLowerCase() == 'bi-pencil-square') {
todoInput.removeAttribute("readonly");
todoInput.focus();
} else {
todoEdit.innerText = "bi-pencil-square";
todoInput.setAttribute("readonly", "readonly");
}
});
todoDelete.addEventListener('click', (e) => {
listTask.removeChild(todoList)
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
:root {
--Button: #432C7A;
--Background: #FCE2DB;
--font-color: #000;
--alternative-font-color: #fff;
--opacty: #998484;
--error: #F83434;
--check: #888;
--margin: 0 1.8125rem;
}
body {
font-family: 'Poppins', sans-serif;
}
input[type=checkbox] {
display: none;
}
.bubble {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.bubble::after {
content: '';
display: block;
opacity: 0;
width: 0px;
height: 0px;
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 999px;
transition: 0.2s ease-in-out;
}
input:checked~.bubble::after {
width: 10px;
height: 10px;
opacity: 1;
}
#name-greet:not([type="radio"]):not([type="checkbox"]),
button {
appearance: none;
border: none;
outline: none;
background: none;
cursor: initial;
}
.container,
.app {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #4EB4FF 0%, rgba(24, 38, 48, 0) 100%);
}
.name {
width: 265px;
height: 262px;
background-color: var(--Background);
border-radius: 40px;
}
.box {
width: 100%;
height: 100%;
max-width: 278px;
max-height: 455px;
background-color: var(--Background);
border-radius: 40px;
}
.name h1 {
font-size: 22px;
font-weight: 700;
color: var(--font-color);
text-align: center;
margin-top: 72px;
}
#name {
margin-top: 26px;
width: 223px;
height: 31px;
border-radius: 10px;
margin-left: 20px;
background: transparent;
}
input[type=text] {
padding-left: 7px;
}
::placeholder {
font-size: 12px;
color: var(--opacty);
opacity: 80%;
}
input:focus::placeholder {
color: transparent;
}
.name h2 {
text-align: center;
font-size: 12px;
}
.greeting .title {
display: flex;
}
.greeting .title input {
margin-left: 0.5rem;
flex: 1 1 0%;
min-width: 0;
margin-right: 1rem;
}
.greeting .title,
.greeting .title input {
color: var(--font-color);
font-size: 1.5rem;
font-weight: bold;
}
#name-greet::placeholder {
font-size: 20px;
color: var(--opacty);
opacity: 80%;
}
.greeting h1 {
margin-left: 29px;
margin-top: 20px;
}
.create-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1.6rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-align: left;
text-transform: uppercase;
}
.create-list h4 {
margin: var(--margin);
font-size: 12px;
color: var(--opacty);
}
.create-list input[type=text] {
display: flex;
align-items: center;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.8rem;
color: var(--font-color);
background-color: transparent;
margin-bottom: 1.1rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: 1px solid #847171;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;
font-weight: 600;
font-size: 12px;
line-height: 18px;
margin: 0 1.8125rem 1rem;
}
.create-list input[type=submit] {
margin: 0 1.8125rem 1rem;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.5rem 1rem;
color: var(--alternative-font-color);
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: none;
border-radius: 10px;
transition: 0.2s ease-out;
}
.create-list input[type=submit]:hover {
background-color: transparent;
border: 1px solid var(--Button);
color: var(--font-color);
cursor: pointer;
}
.todo-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
}
.todo-list .list {
margin: 1rem 0;
}
.todo-list .todo-item {
display: flex;
align-items: center;
background-color: var(--alternative-font-color);
padding: 0.8rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
margin: var(--margin);
max-width: 234px;
}
.todo-item label {
display: block;
margin-right: 1rem;
cursor: pointer;
}
.todo-item .todo-content {
flex: 1 1 0%;
}
.todo-item .todo-content input {
color: var(--font-color);
font-size: 12px;
margin: 0 5px 10px -15px;
border: none;
}
.todo-item .action {
display: flex;
align-items: center;
}
.todo-item .action i {
display: block;
padding: 0.4rem;
cursor: pointer;
transition: 0.2s ease-in-out;
position: relative;
right: 25px;
}
.todo-item .action .bi-pencil-square {
color: var(--Button);
}
.todo-item .action .bi-trash3-fill {
color: var(--error);
}
.todo-item.done .todo-content input {
text-decoration: line-through;
color: var(--grey);
}
#media only screen and (min-width: 768px) {
.name {
width: 543px;
height: 376px;
}
.name h1 {
font-size: 40px;
}
#name {
width: 418px;
height: 54px;
margin-left: 63px;
}
::placeholder {
font-size: 15px;
}
.name #loading {
font-size: 15px;
}
.box {
max-width: 543px;
max-height: 600px;
}
.greeting .title,
.greeting .title input {
font-size: 2rem;
}
#name-greet::placeholder {
font-size: 25px;
color: var(--opacty);
opacity: 80%;
}
.create-list h3 {
font-size: 1rem;
}
.create-list h4 {
font-size: 1rem;
}
.create-list input[type=text] {
max-width: 468px;
font-size: 18px;
}
.create-list input[type=submit] {
max-width: 468px;
font-size: 18px;
}
.todo-list h3 {
font-size: 1.1rem;
}
.todo-list .todo-item {
max-width: 468px;
}
.todo-item .action .bi-pencil-square {
font-size: 28px;
}
.todo-item .action .bi-trash3-fill {
font-size: 28px;
}
.todo-item .todo-content input {
font-size: 18px;
margin: 10px 5px 10px -15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-------Links------->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css'>
<link rel="stylesheet" href="styles.css">
<!--JS Import-->
<title>Todo-List App</title>
</head>
<body>
<!--App Container-->
<main class="app">
<!--Box for the List-->
<div class="box">
<!--Header of the App-->
<section class="greeting">
<h1 class="title" id="greet">Hello! <input type="text" id="name-greet" placeholder="Name here" />
</h1>
</section>
<!--Add task-->
<section class="create-list">
<h3>Create a Todo</h3>
<form id="add-todo-form">
<h4>What's on your todo?</h4>
<input type="text" name="new-todo-input" id="new-todo-input" placeholder="e.g Practice Coding">
<input type="submit" id="task-submit" value="Add Todo">
</form>
</section>
<!--Todo List-->
<section class="todo-list">
<h3>Todo List</h3>
<div class="list" id="todo-list">
<!--<div class="todo-item">
<label>
<input type="checkbox">
<span class="bubble"></span>
</label>
<div class="todo-content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="action">
<i class="bi bi-pencil-square"></i>
<i class="bi bi-trash3-fill"></i>
</div>-->
</div>
</section>
</div>
</main>
</body>
</html>
I've tried using the appendchild for a simple button and then a word will appear but when I applied the code to the todo list the task I input its not adding the list and I'm achieving this type of todo list in the youtube: https://www.youtube.com/watch?v=MkESyVB4oUw&t=6s
just change your form event listener two lines as i marked
// changed below two lines
const textbox = document.querySelector("#new-todo-input");
const task = textbox.value;
window.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector("#add-todo-form");
const input = document.querySelector("#new-todo-input");
const listTask = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
// changed below two lines
const textbox = document.querySelector("#new-todo-input");
const task = textbox.value;
const todoList = document.createElement('div');
todoList.classList.add('todo-item');
const label = document.createElement('label');
const input = document.createElement('input');
const span = document.createElement('span');
label.appendChild(input);
label.appendChild(span);
const todoContent = document.createElement('div');
todoContent.classList.add('todo-content');
todoList.appendChild(todoContent);
const todoInput = document.createElement('input');
todoInput.classList.add('text');
todoInput.type = 'text'
todoInput.value = task;
todoInput.setAttribute('readonly', 'readonly');
todoContent.appendChild(todoInput);
const todoAction = document.createElement('div');
todoAction.classList.add('action');
const todoEdit = document.createElement('i');
todoEdit.classList.add('bi-pencil-square');
const todoDelete = document.createElement('i');
todoDelete.classList.add('bi-trash3-fill');
todoAction.appendChild(todoEdit);
todoAction.appendChild(todoDelete);
todoList.appendChild(todoAction);
listTask.appendChild(todoList);
input.value = '';
todoEdit.addEventListener('click', (e) => {
if (todoEdit.innerText.toLowerCase() == 'bi-pencil-square') {
todoInput.removeAttribute("readonly");
todoInput.focus();
} else {
todoEdit.innerText = "bi-pencil-square";
todoInput.setAttribute("readonly", "readonly");
}
});
todoDelete.addEventListener('click', (e) => {
listTask.removeChild(todoList)
});
});
});
<!-- begin snippet: js hide: false console: true babel: null -->
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
:root {
--Button: #432C7A;
--Background: #FCE2DB;
--font-color: #000;
--alternative-font-color: #fff;
--opacty: #998484;
--error: #F83434;
--check: #888;
--margin: 0 1.8125rem;
}
body {
font-family: 'Poppins', sans-serif;
}
input[type=checkbox] {
display: none;
}
.bubble {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.bubble::after {
content: '';
display: block;
opacity: 0;
width: 0px;
height: 0px;
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 999px;
transition: 0.2s ease-in-out;
}
input:checked~.bubble::after {
width: 10px;
height: 10px;
opacity: 1;
}
#name-greet:not([type="radio"]):not([type="checkbox"]),
button {
appearance: none;
border: none;
outline: none;
background: none;
cursor: initial;
}
.container,
.app {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #4EB4FF 0%, rgba(24, 38, 48, 0) 100%);
}
.name {
width: 265px;
height: 262px;
background-color: var(--Background);
border-radius: 40px;
}
.box {
width: 100%;
height: 100%;
max-width: 278px;
max-height: 455px;
background-color: var(--Background);
border-radius: 40px;
}
.name h1 {
font-size: 22px;
font-weight: 700;
color: var(--font-color);
text-align: center;
margin-top: 72px;
}
#name {
margin-top: 26px;
width: 223px;
height: 31px;
border-radius: 10px;
margin-left: 20px;
background: transparent;
}
input[type=text] {
padding-left: 7px;
}
::placeholder {
font-size: 12px;
color: var(--opacty);
opacity: 80%;
}
input:focus::placeholder {
color: transparent;
}
.name h2 {
text-align: center;
font-size: 12px;
}
.greeting .title {
display: flex;
}
.greeting .title input {
margin-left: 0.5rem;
flex: 1 1 0%;
min-width: 0;
margin-right: 1rem;
}
.greeting .title,
.greeting .title input {
color: var(--font-color);
font-size: 1.5rem;
font-weight: bold;
}
#name-greet::placeholder {
font-size: 20px;
color: var(--opacty);
opacity: 80%;
}
.greeting h1 {
margin-left: 29px;
margin-top: 20px;
}
.create-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1.6rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-align: left;
text-transform: uppercase;
}
.create-list h4 {
margin: var(--margin);
font-size: 12px;
color: var(--opacty);
}
.create-list input[type=text] {
display: flex;
align-items: center;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.8rem;
color: var(--font-color);
background-color: transparent;
margin-bottom: 1.1rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: 1px solid #847171;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;
font-weight: 600;
font-size: 12px;
line-height: 18px;
margin: 0 1.8125rem 1rem;
}
.create-list input[type=submit] {
margin: 0 1.8125rem 1rem;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.5rem 1rem;
color: var(--alternative-font-color);
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: none;
border-radius: 10px;
transition: 0.2s ease-out;
}
.create-list input[type=submit]:hover {
background-color: transparent;
border: 1px solid var(--Button);
color: var(--font-color);
cursor: pointer;
}
.todo-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
}
.todo-list .list {
margin: 1rem 0;
}
.todo-list .todo-item {
display: flex;
align-items: center;
background-color: var(--alternative-font-color);
padding: 0.8rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
margin: var(--margin);
max-width: 234px;
}
.todo-item label {
display: block;
margin-right: 1rem;
cursor: pointer;
}
.todo-item .todo-content {
flex: 1 1 0%;
}
.todo-item .todo-content input {
color: var(--font-color);
font-size: 12px;
margin: 0 5px 10px -15px;
border: none;
}
.todo-item .action {
display: flex;
align-items: center;
}
.todo-item .action i {
display: block;
padding: 0.4rem;
cursor: pointer;
transition: 0.2s ease-in-out;
position: relative;
right: 25px;
}
.todo-item .action .bi-pencil-square {
color: var(--Button);
}
.todo-item .action .bi-trash3-fill {
color: var(--error);
}
.todo-item.done .todo-content input {
text-decoration: line-through;
color: var(--grey);
}
#media only screen and (min-width: 768px) {
.name {
width: 543px;
height: 376px;
}
.name h1 {
font-size: 40px;
}
#name {
width: 418px;
height: 54px;
margin-left: 63px;
}
::placeholder {
font-size: 15px;
}
.name #loading {
font-size: 15px;
}
.box {
max-width: 543px;
max-height: 600px;
}
.greeting .title,
.greeting .title input {
font-size: 2rem;
}
#name-greet::placeholder {
font-size: 25px;
color: var(--opacty);
opacity: 80%;
}
.create-list h3 {
font-size: 1rem;
}
.create-list h4 {
font-size: 1rem;
}
.create-list input[type=text] {
max-width: 468px;
font-size: 18px;
}
.create-list input[type=submit] {
max-width: 468px;
font-size: 18px;
}
.todo-list h3 {
font-size: 1.1rem;
}
.todo-list .todo-item {
max-width: 468px;
}
.todo-item .action .bi-pencil-square {
font-size: 28px;
}
.todo-item .action .bi-trash3-fill {
font-size: 28px;
}
.todo-item .todo-content input {
font-size: 18px;
margin: 10px 5px 10px -15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-------Links------->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css'>
<link rel="stylesheet" href="styles.css">
<!--JS Import-->
<title>Todo-List App</title>
</head>
<body>
<!--App Container-->
<main class="app">
<!--Box for the List-->
<div class="box">
<!--Header of the App-->
<section class="greeting">
<h1 class="title" id="greet">Hello! <input type="text" id="name-greet" placeholder="Name here" />
</h1>
</section>
<!--Add task-->
<section class="create-list">
<h3>Create a Todo</h3>
<form id="add-todo-form">
<h4>What's on your todo?</h4>
<input type="text" name="new-todo-input" id="new-todo-input" placeholder="e.g Practice Coding">
<input type="submit" id="task-submit" value="Add Todo">
</form>
</section>
<!--Todo List-->
<section class="todo-list">
<h3>Todo List</h3>
<div class="list" id="todo-list">
<!--<div class="todo-item">
<label>
<input type="checkbox">
<span class="bubble"></span>
</label>
<div class="todo-content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="action">
<i class="bi bi-pencil-square"></i>
<i class="bi bi-trash3-fill"></i>
</div>-->
</div>
</section>
</div>
</main>
</body>
</html>
I made a search box with CSS grid that shrinks when you shrink the page. But, for some reason, it won't shrink as much as it I think it should be able to.
Here is how it looks fully extended:
Here is how it looks shrunken down:
How could I make the width of the search bar shrink down enough with the page so that the search button doesn't switch to the buttom?
Navbar.js
import React from 'react';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<nav id="nav-bar">
<div className="container">
<h2 className="homeBtn">VIZZEY</h2>
<div className="search">
<input type="search" className="form-control" />
<button className="searchBtn">o</button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar;
Navbar.css
* {
margin: 0;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
height: 55px;
text-align: center;
justify-content: center;
padding: auto;
}
#nav-bar {
background-color: #888888;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
}
ul li a {
padding: 1.6rem;
font-weight: bold;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 90%;
flex: auto;
border: none;
padding-left: 10px;
justify-content: center;
}
.homeBtn {
background-color: #00ce7f;
}
.search {
padding-left: 10px;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
margin-right: 10px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
padding-left: 5px;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-weight: bold;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
width: 40px;
border: none;
font-size: large;
font-weight: bold;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
Try adding display: flex on the .search rule:
* {
margin: 0;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
height: 55px;
text-align: center;
justify-content: center;
padding: auto;
}
#nav-bar {
background-color: #888888;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
}
ul li a {
padding: 1.6rem;
font-weight: bold;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 90%;
flex: auto;
border: none;
padding-left: 10px;
justify-content: center;
}
.homeBtn {
background-color: #00ce7f;
}
.search {
padding-left: 10px;
display: flex; /* added */
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
margin-right: 10px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
padding-left: 5px;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-weight: bold;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
width: 40px;
border: none;
font-size: large;
font-weight: bold;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<nav id="nav-bar">
<div class="container">
<h2 class="homeBtn">VIZZEY</h2>
<div class="search">
<input type="search" class="form-control" />
<button class="searchBtn">o</button>
</div>
<ul class="ugh-buttons">
<li class="btn">
<button class="icon-btn">lol</button>
</li>
<li class="btn">
<button class="icon-btn">lol</button>
</li>
<li class="btn">
<button class="icon-btn">lol</button>
</li>
<li class="btn">
<button class="icon-btn">lol</button>
</li>
</ul>
</div>
</nav>
I've created a modal but it would not display, it worked on an app I created with React, but with vanilla javascript (on a different project) it won't work.
Link for html, css and javascript code: https://codepen.io/J-Kazama/pen/WNbPoZB
If I change the display of .bg-modal to flex from none the modal does show up, so I assume the problem is with javascript.
remove the import from your JS and it works...
(function() {
document.getElementById('revAddButton').addEventListener('click', function() {
document.querySelector('.bg-modal').style.display = 'flex'
});
})()
.btn {
display: inline-block;
border: none;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
text-align: center;
cursor: pointer;
border-radius: 4px;
}
.btn-red {
text-decoration: none;
color: #fff;
background: #ff4742;
border: 2px solid #ff4742;
border-radius: 25px;
margin-right: 7px;
}
.btn-red:hover,
.btn-red:active {
border: 2px solid #ff4742;
text-decoration: none;
color: #ff4742;
background-color: white;
}
.div1:hover,
.div1:focus {
color: #555555;
background: rgba(60, 186, 84, 0.25);
}
.parent {
width: 100%;
background-color: #f8f9fb;
margin-top: 160px;
height: 500px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
align-content: flex-start;
}
.div1 {
background-color: rgba(70, 220, 100, 0.55);
position: relative;
margin: 5px;
width: 275px;
height: 220px;
border: 0;
border-radius: 5px;
font-family: 'Varela Round', sans-serif;
}
::-webkit-input-placeholder {
font-family: 'Varela Round', sans-serif;
}
::-webkit-moz-input-placeholder {
font-family: 'Varela Round', sans-serif;
}
input[type="text"] {
font-family: 'Varela Round', sans-serif;
}
.text {
font-family: 'Varela Round', sans-serif;
}
.closeBtn {
color: #cccccc;
float: right;
font-size: 30px;
}
.closeBtn:hover,
.closeBtn:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
}
.bg-modal {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
justify-content: center;
align-items: center;
display: none;
filter: blur(0px);
}
.modal-content {
background-color: #f4f4f4;
width: 600px;
height: 600px;
border-radius: 6px;
text-align: center;
padding: 20px;
margin-top: 30px;
position: relative;
}
.class-input {
width: 50%;
display: block;
margin: 8px auto;
}
.form-control {
display: inline-block;
width: 450px;
height: 34px;
padding: 6px 12px;
font-size: 20px;
font-family: Nunito, serif;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.comp-input {
text-align: left;
background-color: #fff!important;
border: 1px solid #e0e0e0!important;
height: 50px!important;
padding-left: 15px;
padding-right: 15px;
border-radius: 3px!important;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.sub-button {
margin-top: 10px;
}
.container {
display: flex;
justify-content: center;
align-self: center;
transition: 1s;
padding: 20px;
position: relative;
background: #ff4742;
}
.container .content {
position: relative;
max-width: 800px;
}
<link href="index.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap" rel="stylesheet"></link>
<h1 class="text">Boutique</h1>
<a id="revAddButton" role="button" target="_blank" class="btn btn-red text">Add a Comment</a>
<div class="bg-modal" id="modal">
<div class="modal-content">
<span class="closeBtn" id="closeBtn">×</span>
<form action="">
<h2 class="text">Add your comment</h2>
<input class="class-input form-control comp-input input-lg" type="text" placeholder="Name" />
<a role="button" href="/main" target="_blank" class="btn btn-red text sub-button">Submit</a>
</form>
</div>
</div>
So I have this example right here which lets the user either A) Log in or B) Register
It shows the login form as it's primary display but I want to switch that around, so that it displays "Register" first and then you can switch over to Login.
I've tried switching Z-index positions but that didn't seem to do much.
So that leaves me wondering, what't the correct way of achieving this?
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
This has nothing to do with z-index, this is based on that one form is initially hidden and the other visible.
Replace .form .register-form { display: none; } with .form .login-form { display: none; }
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .login-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
One way to do it is setting "login-form" CSS to "display:none" and then doing a switch when you need with
$(".login-form").css("display","block")
for example, while setting
$(".register-form").css("display","none")
Just remove this line from css:
.form .register-form {
display: none;
}
And add this:
.form .login-form {
display: none;
}
You can see the result in this fiddle:
http://jsfiddle.net/nyL7xq6f/
I'm not sure how to describe this further, and sorry if it's hard to understand what I"m trying to say.
Hello, firstly I'll like to apologize as I'm a newbie to this. I'd like to know if it's possible to ensure that the search-box in the codesnippet does not transform after I have keyed in some words. In other words it does not go back to its original state which is a circle when there's input.
Thank you in advance!
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>
In your input you can add something like an id and required like this:
<input id=someInput autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search..." required>
In your css add :
#someInput: :valid { width: 240px;}
and do what you want with invalid:
#someInput :invalid { what you want}
Tested and it works fine, good luck!
This is what javascript is for. To get the desired behavior you could check for a non empty string in the search field. Or you can listen for a click and change the state like I did here. This way it wont shrink when you delete text though.
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
<script>
const search = document.getElementsByClassName("search-txt")[0];
search.addEventListener("click", function() {
search.style.width = '240px';
});
</script>
</body>
</html>
You can use input:focus to make sure the text box is wide enough when being typed / in focus
I have added js, so that the input box stays same if there any value present, hope this helps you
$('.search-txt').on("input", function() {
if($('.search-txt').val())
{
$('.search-txt').addClass('inputExist');
}
else
{
$('.search-txt').removeClass('inputExist');
}
});
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus, .search-txt.inputExist {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>