I have been working on a search bar here that I've played around with the text sizes and such. However, I have noticed that the font size of the text typed in shrunk down in size after being typed in the size that I prefered. I'm not exactly sure how to have the text stay the size it was typed in as.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section style="background-color: lightgrey;">
<input type="text" placeholder="Search Fennec Tech..." id="Search_Bar" onclick="Search()" class="Search-bar">
</section>
</body>
</html>
Here's my CSS:
*
section {
place-content: center;
scroll-snap-align: start;
block-size: 100vh;
padding: 100px;
font-family: sans-serif;
font-size: 50px;
}
#Search_Bar {
background-color: transparent;
border: none;
border-left: solid 5px blue;
border-bottom: solid 5px blue;
color: blue;
}
.Search-bar {
height: 200px;
width: 1250px;
font-size: 20px;
placeholder-text-color: red;
}
#Search_Bar:focus {
animation-name: Search-anim;
animation-duration: 2s;
font-size: 75px;
}
#keyframes Search-anim {
from {
background-color: transparent;
color: green;
}
to {
background-color: white;
color: blue;
}
}
::placeholder {
color: red;
font-size: 75px;
opacity: 0.5;
}
How is it possible to do this? I'm quite stuck on this.
Why you have two different sizes.
.Search-bar {
font-size: 20px; /* THE SIZE WHEN NOT IN FOCUS */
}
#Search_Bar:focus {
font-size: 75px; /* THE SIZE WHEN IN FOCUS */
}
So it you want big text all the time set the big text on the class.
Related
I'm struggling with how to make my input field 100% width and centered and also have the "Add" button centered but displayed underneath the input field. I just need this part of the application to be responsive for mobile devices. I also plan to centre the other button when I get to that stage. Does anyone have any idea? Thanks in advance.
#media only screen and (max-width: 965px) {
body {
background-color: lightblue;
color: #fff;
}
.app {
margin: 2.5%;
border: 1px solid #4CAF50;
} /* main div */
.header {
border: 1px solid #4CAF50;
text-align: centre;
font-family: 'Open Sans', sans-serif;
} /* title div */
.title {
text-align: center;
font-size: 40px;
} /* title */
.input {
width: 100%;
border: 1px solid #4CAF50;
} /* input tasks div */
::-webkit-input-placeholder {
text-align: center;
}
.input input,
.input-btn,
.item-text,
.action-btns,
.edit-input {
font-size: 20px;
}
.input-btn {
background-color: #23ba42;
color: #F1F1F1;
} /* add button */
.todo-list {
border: 1px solid #4CAF50;
margin-top: 40px;
width: 100%;
} /* to-do list div */
.item {
margin-bottom: 40px;
border-bottom: 2px solid red;
} /* individual tasks within to-do list */
.item-text {
width: 100%;
text-align: center;
} /* task text */
.action-btns {
text-align: center;
} /* task action buttons div */
.action-btn {
display: block;
justify-content: center;
align-items: center;
} /* individual action buttons */
.remove-btn {
background-color: #ce0a0a;
color: #f1f1f1;
font-size: 18px;
}
.edit-btn {
background-color: #cb960d;
color: #f1f1f1;
font-size: 18px;
}
.update-btn {
background-color: #23ba42;
color: #f1f1f1;
font-size: 18px;
}
.edit-input {
width: 100%;
text-align: center;
}
.hide{
display: none;
} /* hides input field for editing to-do tasks */
}
<center><div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<br>
<button type="button" name="add-btn" id="add-btn" class="input-btn">
Add
</button></div> </center>
<center><div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<br>
<button type="button" name="add-btn" id="add-btn" class="input-btn">
Add
</button></div> </center>
Aru u looking for this Try it And tell me if it Worked for u
See I am Getting Add Button in center Underneath the Input Tag
I was trying to create an input field with a transition effect to the placeholder, for that I used a <span> tag to hold the placeholder and transitioned it using the :focus CSS selector
It works pretty well but the problem is after we input the text and click anywhere outside the input area/text field area, the placeholder transitions back and overlaps with the text inputted.
I want the placeholder to not transition back if the text area currently has text in it.
Also, there is one more issue that the text field doesn't get selected if the placeholder is clicked.
How can I clear these bugs?
I've provided the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input</title>
<style>
body {
margin: 0px;
}
#top-heading {
padding: 1rem;
text-align: center;
margin: auto;
margin-bottom: 1rem;
}
textarea {
width: 85%;
display: block;
height: 10vh;
margin: 1.5rem;
margin-top: 0rem;
padding: 0.5rem;
font-size: large;
}
span {
position: absolute;
top: 6rem;
padding-left: 2.7rem;
color: rgb(121, 120, 120);
font-size: larger;
}
textarea:focus~span {
color: black;
font-size: 1.091rem;
transition: .6s ease;
transform: translate3d(-1.15rem, -1.9rem, 2rem);
}
</style>
</head>
<body>
<h1 id="top-heading">Input</h1>
<textarea id="txt-input"></textarea>
<span>Enter the input</span>
</body>
</html>
Can you please check the below code? Hope it will work for you. You need to give transition: .6s ease; property to span tag instead of textarea:focus~span.
Please refer to this link: https://jsfiddle.net/yudizsolutions/kjfc0z37/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input</title>
<style>
body {
margin: 0px;
}
#top-heading {
padding: 1rem;
text-align: center;
margin: auto;
margin-bottom: 1rem;
}
textarea {
width: 85%;
display: block;
height: 10vh;
margin: 1.5rem;
margin-top: 0rem;
padding: 0.5rem;
font-size: large;
}
span {
position: absolute;
top: 6rem;
padding-left: 2.7rem;
color: rgb(121, 120, 120);
font-size: larger;
transition: .6s ease;
}
textarea:focus~span {
color: black;
font-size: 1.091rem;
transform: translate3d(-1.15rem, -1.9rem, 2rem);
}
</style>
</head>
<body>
<h1 id="top-heading">Input</h1>
<textarea id="txt-input"></textarea>
<span>Enter the input</span>
</body>
</html>
I created a custom 'searchbox'. The 'searchbox' actually built by a div and input text inside it.
Later on I will add a 'search' icon on the left and 'clear' button on the right.
The issue is, the input inside the div already sized based on it's container and when I'm focusing the input text, I couldn't find a way to expand the parent div (instead of the input itself). It's important the div will expand so the icons and buttons I will later add - will expand with the input.
Couldn't find a way doing it with CSS only (without JS).
Will appreciate your assistance!
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.App {
width: 100%;
height: 200px;
background-color: tan;
}
.fieldcontainer {
display: flex;
padding-left: 8px;
background-color: #CCCCCC;
border-color: grey;
width: 300px;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-radius: 8px;
cursor: default;
transition: 'background-color' 0.4s;
}
.fieldcontainer:hover {
background-color: #C3C3C3;
}
.searchfield {
background-color: inherit;
font-size: 1em;
border: 0;
flex-grow: 8;
transition: all 0.4s linear;
}
.searchfield:focus {
outline: none;
width: 100%;
}
</style>
</head>
<body>
<div class="App">
<div class="fieldcontainer">
<input class="searchfield" type="text" placeholder="search" />
</div>
</div>
</body>
</html>
Use focus-within (https://developer.mozilla.org/fr/docs/Web/CSS/:focus-within)
* {
box-sizing: border-box;
}
.App {
height: 200px;
background-color: tan;
}
.fieldcontainer {
display: flex;
padding-left: 8px;
background-color: #CCCCCC;
border-color: grey;
width: 300px;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-radius: 8px;
cursor: default;
transition: 0.4s;
}
.fieldcontainer:hover {
background-color: #C3C3C3;
}
.searchfield {
background-color: inherit;
font-size: 1em;
border: 0;
flex-grow: 8;
transition: all 0.4s linear;
outline:none;
}
.fieldcontainer:focus-within {
width: 100%;
}
<div class="App">
<div class="fieldcontainer">
<input class="searchfield" type="text" placeholder="search" />
</div>
</div>
Why does my submit button go under the input text field when the browser window is smaller than the total width of the text field and the button itself? See attachment below.
.content {
height: auto;
margin: auto;
overflow: hidden;
max-width: 1100px;
}
.content p {
text-align: center;
}
section {
width: 100%;
height: auto;
margin-top: 80px;
background-color: #fff;
}
section h1 {
font-size: 34px;
font-weight: 300;
text-align: center;
margin-bottom: 10px;
}
.search-sec {
height: 147px;
margin-top: 0;
display: flex;
justify-content: center;
background-color: #ECEFF1;
}
.search-sec h1 {
padding: 0;
font-size: 18px;
text-align: left;
margin-bottom: 10px;
}
.content input[type=text] {
float: left;
outline: none;
height: 50px;
width: 770px;
align-self: center;
border: none;
padding: 0 0 0 10px;
box-sizing: border-box;
background-color: white;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.content input[type=submit] {
float: right;
color: white;
height: 50px;
width: 100px;
border: none;
font-size: 14px;
text-transform: uppercase;
background-color: #4285f4;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.content input[type=submit]:hover {
cursor: pointer;
background-color: #2a75f3;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Hosting</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="search-sec">
<div class="content">
<h1>Your perfect domain starts here.</h1>
<form>
<input type="text" name="domain" placeholder="Search for a domain here.">
<input type="submit" value="Search">
</form>
</div>
</section>
</body>
</html>
I would like the submit button to stay next to the input text field at all times. if I make the browser windows smaller in width I would like for the input field to decrease in size along with it with the submit button always next to it.
Thank you
One solution would be to set the width of your input to width: calc(100% - 100px);
This will tell constrain your text input to always be 100 pixels less than 100%. That way even when the window changes, your button will always stay to the right.
See: https://jsfiddle.net/7ynetshe/
tl;dr - How can I center the blue div found in the third image in the white space, not the page?
I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one div element. This can be seen below.
It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class .sidebar. .sidebar has a fixed width property of 400px. The rest of the page is simply the rest of the div with the class .container, which extends to 100% on both its width and height
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.
Gray is the html element.
White is the body element.
The aqua on white is the div with the class .container.
The following aqua is the div with the class .sidebar.
Let's now insert the div that's giving me issues.
As you can see, a single blue div has been added. This has the class .test, and which simply sets the width, height, and margin properties. As you can now see, when the margin is set to 0 auto, the div is centered to the window and not the white space. Obviously this is the expected action.
The issue I'm facing is that I have no idea how I can center the blue div in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how margin: 0 auto would be any use. How would I center my test element in the white space? Can this be achieved through CSS and HTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<div class="emphasis-button-disabled">Support</div>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
#charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Wrap it in another element with position=absolute, a right, top and bottom value of 0 and a left value of 400px:
<div style="position:absolute;right:0;top:0;bottom:0;left:400px;">
<div class="test"></div>
</div>
Your side bar already have position fixed, so please add padding left to your container it will work
.container {
height: 100%;
padding-left: 400px; /*width of your .sidebar*/
}
try changing the width for a percentage and adding a new div that covers the rest of the white space so you can center the blue element on that new div.
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
}
.new-div{width:80%;float:left;}
Set the test inside the new div
<div class="new-div"><div class="test"></div></div>