I have a media query that makes my container go to 90% width when the screen goes lower than 550px and when the password generator overflows it pushes the width to 500px instead of the 90%. How can i fix this? The overflow happens when I select one of the password options and set the length to 50.
Oof this website is hurting my eyes a bit,
Well it is because you are using flexbox on the body, to fix this try:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap");
body,
html {
padding: 0;
margin: 0;
background-color: blueviolet;
font-family: "Poppins", sans-serif;
color: black;
font-weight: 700;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
text-align: center;
font-size: 1.1em;
}
#generatorContainer {
width: 90%;
border: 2px solid white;
background-color: rgb(50, 64, 168);
padding: 0.5em;
}
#passwordContainer {
border-radius: 0.5em;
background-color: #3399ff;
overflow: auto;
}
.passwordFeaturesContainer {
display: flex;
justify-content: space-between;
margin: 0.5em 0;
}
#generatePasswordButton {
margin: 0 auto;
width: 80%;
display: block;
height: 60px;
}
#generatePasswordButton {
cursor: pointer;
background-color: rgb(50, 168, 52);
outline: none;
box-shadow: none;
color: rgb(50, 64, 168);
font-size: 1.2em;
font-weight: 700;
}
#media only screen and (min-width: 551px){
#generatorContainer {
width: 500px;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png">
<script data-dapp-detection="">
(function() {
let alreadyInsertedMetaTag = false
function __insertDappDetected() {
if (!alreadyInsertedMetaTag) {
const meta = document.createElement('meta')
meta.name = 'dapp-detected'
document.head.appendChild(meta)
alreadyInsertedMetaTag = true
}
}
if (window.hasOwnProperty('web3')) {
// Note a closure can't be used for this var because some sites like
// www.wnyc.org do a second script execution via eval for some reason.
window.__disableDappDetectionInsertion = true
// Likely oldWeb3 is undefined and it has a property only because
// we defined it. Some sites like wnyc.org are evaling all scripts
// that exist again, so this is protection against multiple calls.
if (window.web3 === undefined) {
return
}
__insertDappDetected()
} else {
var oldWeb3 = window.web3
Object.defineProperty(window, 'web3', {
configurable: true,
set: function (val) {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
oldWeb3 = val
},
get: function () {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
return oldWeb3
}
})
}
})()</script></head>
<body>
<div class="flex">
<form id="generatorContainer">
<div id="passwordContainer">
<h2>Password Generator</h2>
</div>
<div class="passwordFeaturesContainer">
<label for="passLength">Password Length</label>
<input type="number" step="1" min="4" max="50" id="passLength" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="lowerCase">Contain Lowercase Letters</label>
<input type="checkbox" id="lowerCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="upperCase">Contain Uppercase Letters</label>
<input type="checkbox" id="upperCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="numbers">Contain Numbers</label>
<input type="checkbox" id="numbers" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="symbols">Contain Symbols</label>
<input type="checkbox" id="symbols" required="">
</div>
<button type="submit" id="generatePasswordButton">Generate Password</button>
</form>
</div>
<script src="main.js"></script>
</body></html>
I've added a flex div around the generator and added a class for flex as well... Try to avoid much styling on standard generated elements like html, body, script etc etc.. And please try start styling at a mobile perspective (most web users are commonly mobile users), so instead of using media-queries with max-width, use min-width: 551px; In your case you eventually dont need a media-query instead. If you are just using max-width: 500px; on your #generatorContainer its enough.
Happy coding!!
Related
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
so I'm a beginner and I started this project by first writing CSS in styles.scss and then transforming the code inside of it using scss tools. I made an each loop to loop through a set of colors in my color map, placed in a mixin and put that mixin under [class^=btn].
I don't know why this doesn't work?
Here is my SCSS:
//colors
$base-grey: #808080;
$base-white: #ffffff;
$base-green: #71eeb8;
$base-blue: #2dcae6; //base-success: #33c052;
$base-red: #ff6666; //red
$base-orange: #ff751a; //warning
$base-purple: #8a54f7; //info
// grid base class
.grid {
// .grid__row
&__row {
padding: 1em 10px;
display: flex;
flex-direction: column;
// NOTE: replace with media query mixin if aiming for exceeds
#media (min-width: 768px) {
flex-direction: row;
}
}
// .grid__col
&__col {
// create grid columns dynamically
// loop through each column size
#for $i from 1 through 12 {
// concatenate CSS selector, ie when $i = 1,
// selector would be .grid__col--1
&--#{$i} {
// base styles applied to all grid columns
// NOTE: could be converted to a placeholder, along with margin
// from the media query
margin-top: 10px;
flex-basis: 100%;
border: 1px red solid;
// NOTE: replace with media query mixin if aiming for exceeds
#media (min-width: 768px) {
// base stlyes applied to all grid columns
margin-top: 0;
// make column width a percentage of the column number / total columns
flex-basis: #{$i / 12 * 100 + "%"} ;
}
}
}
}
}
// targets all elements with classes that begin with grid__col
[class^=grid__col] {
// grid__col + grid__col, targets two sibling columns
& + & {
// NOTE: replace with media query mixin if aiming for exceeds
#media (min-width: 768px) {
// add grid gutter
margin-left: 10px;
}
}
}
.grid {
&__row {
display: flex;
}
}
//BASE
.container {
text-align: left;
font-family: 'Arial Narrow', Arial,sans-serif;
color: $base-grey;
padding: 5px;
font-weight: 500;
}
p {
text-align: left;
line-height: 1.3;
}
a {
text-decoration: none;
}
//NAVIGATION
.nav {
list-style-type: none;
padding: 0;
text-align: center;
}
.nav__item a {
display: block;
color: inherit;
margin: 8px 0;
padding: 8px;
}
.nav__item a:hover {
color: $base-white;
background-color: $base-green;
}
//TYPOGRAPHY
//link
.link {
color: $base-blue;
font-weight: bold;
}
//blockquote
.blockquote {
border-left: $base-green 8px solid;
padding-left: 10px;
font-style: oblique;
font-size: 1.2em;
}
// headlines
#mixin h2-font-weight {
font-weight: 100;
}
.headline--primary {
color: $base-green;
margin-left: 10px;
}
.headline--secondary {
text-align: left;
#include h2-font-weight;
}
//FORM
.form {
display: flex;
flex-direction: column;
&__input {
border: none;
border-bottom: 2px solid $base-green;
margin-bottom: 15px;
}
&__label--hidden {
display: none;
}
& .headline--secondary {
#include h2-font-weight;
}
}
//BUTTONS
#mixin button-styles {
display: block;
width: 100%;
border: none;
margin-bottom: 15px;
padding: 10px;
color: $base-white;
text-transform: uppercase;
font-weight: bold;
}
$button-colors :(
default:$base-blue,
success:$base-green,
error:$base-red,
warning:$base-orange,
info:$base-purple
);
#mixin button-colors {
#each $button, $color in $button-colors {
.btn--#{$button} {
background-color: #{$color};
}
}
}
[class*=btn] {
#include button-styles;
}
//IMAGE
#mixin center-images {
display: block;
max-width: 100%;
margin: 0 auto;
padding: 8px;
}
[class^=img] {
#include center-images;
}
.img {
&--frame {
border: 2px solid $base-grey;
}
}
This is my HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circles UI Kit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<!--
List of classes used
Grid:
.container
.grid__row
.grid__col--1 *NOT USED HERE
.grid__col--2 *
.grid__col--3
.grid__col--4
.grid__col--5
.grid__col--6
.grid__col--7
.grid__col--8
.grid__col--9
.grid__col--10 *
.grid__col--11 *
.grid__col--12
.card
.centered
.theme__colors
(.grid__col--1, .grid__col--2, .grid__col--10, and .grid__col--11 are not used here in the HTML but would be good to include in the Sass)
Typography:
.container
.link
.blockquote
.headline--primary
.headline--secondary
Image:
.img--logo
.img--frame
.img--avatar
Navigation:
.nav
.nav__item
Buttons:
.btn--default
.btn--success
.btn--error
.btn--warning
.btn--info
.theme__colors
Forms:
.form
.form__label--hidden
.form__input
-->
<body class="container">
<div class="grid__row">
<div class="grid__col--3">
<a class="link" href="/">
<img class="img--logo" alt="circles logo" src="images/logo.png">
</a>
</div>
<div class="grid__col--9">
<nav role="navigation">
<ul class="nav">
<li class="nav__item">Typography</li>
<li class="nav__item">Buttons</li>
<li class="nav__item">Form</li>
<li class="nav__item">Images</li>
<li class="nav__item">Grid</li>
</ul>
</nav>
</div>
</div>
<div class="grid__row">
<div class="grid__col--12">
<div class="card">
<p>This is what the navigation menu looks like when the screen is at 769px or higher. When the screen is less
than 769px,
the menu will be displayed vertically.</p>
</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--8">
<div class="card">
<h4 id="type" class="headline--secondary">Typography</h4>
<h1 class="headline--primary">Take a look at this amazing headline</h1>
<p>This is a typical paragraph for the UI Kit. Here is what a link might look like.
The
typical font family for this kit is Helvetica Neue. This kit is intended for clean and refreshing web layouts.
No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes
fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using
italics as well from time to time</em>.
Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but
this
amazing paragraph as well. :)</p>
<blockquote class="blockquote">You know what really gets me going? A really nice set of block quotes. That's
right, block quotes that say, "Hey,
I'm an article you want to read and nurture."</blockquote>
</div>
</div>
<div class="grid__col--4">
<form class="form">
<legend id="forms" class="headline--secondary">Form Elements</legend>
<img class="img--avatar" src="images/avatar.png" alt="Avatar">
<label class="form__label--hidden" for="username">Username:</label>
<input class="form__input" type="text" id="username" placeholder="Username">
<label class="form__label--hidden" for="password">Password:</label>
<input class="form__input" type="password" id="password" placeholder="Password">
<button class="btn--default theme__colors" type="submit" value="Login">Login</button>
</form>
</div>
</div>
<h4 id="images" class="headline--secondary">Images</h4>
<div class="grid__row">
<div class="grid__col--6">
<img class="img--frame" src="images/image.png" alt="sample image">
</div>
<div class="grid__col--6">
<img class="img--avatar" src="images/avatar.png" alt="Avatar">
</div>
</div>
<h4 id="buttons" class="headline--secondary">Buttons</h4>
<div class="grid__row">
<div class="grid__col--12">
<button class="btn--default theme__colors">default</button>
<button class="btn--success theme__colors">success</button>
<button class="btn--error theme__colors">error</button>
<button class="btn--warning theme__colors">warning</button>
<button class="btn--info theme__colors">info</button>
</div>
</div>
<h4 id="grid" class="headline--secondary">Grid System</h4>
<div class="grid__row">
<div class="grid__col--12 theme__colors">.grid__col--12</div>
</div>
<div class="grid__row">
<div class="grid__col--6 theme__colors">.grid__col--6</div>
<div class="grid__col--6 theme__colors">.grid__col--6</div>
</div>
<div class="grid__row">
<div class="grid__col--4 theme__colors">.grid__col--4</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
</div>
<div class="grid__row">
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
</div>
<div class="grid__row">
<div class="grid__col--5 theme__colors">.grid__col--5</div>
<div class="grid__col--7 theme__colors">.grid__col--7</div>
</div>
<div class="grid__row">
<div class="grid__col--8 theme__colors">.grid__col--8</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
</div>
<div class="grid__row">
<div class="grid__col--7 theme__colors centered">.centered .grid__col--7</div>
</div>
</body>
</html>
You are missing two things:
The mixin of button colours need to be:
#mixin button-colors {
#each $button, $color in $button-colors {
&.btn--#{$button} {
background-color: #{$color};
}
}
}
with & before .btn.
You didn't call your mixin. You need to write:
[class*=btn] {
#include button-styles();
#include button-colors();
}
I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
Is there a quick way to create an input text element with an icon on the right to clear the input element itself (like the google search box)?
I looked around but I only found how to put an icon as background of the input element. Is there a jQuery plugin or something else?
I want the icon inside the input text element, something like:
--------------------------------------------------
| X|
--------------------------------------------------
Add a type="search" to your input
The support is pretty decent but will not work in IE<10
<input type="search">
Older browsers
If you need IE9 support here are some workarounds
Using a standard <input type="text"> and some HTML elements:
/**
* Clearable text inputs
*/
$(".clearable").each(function() {
const $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
/* Clearable text inputs */
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 24px;
width: 100%;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
font-size: 1.2em;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
<span class="clearable">
<input type="text" name="" value="" placeholder="">
<i class="clearable__clear">×</i>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Using only a <input class="clearable" type="text"> (No additional elements)
set a class="clearable" and play with it's background image:
/**
* Clearable text inputs
*/
function tog(v){return v ? "addClass" : "removeClass";}
$(document).on("input", ".clearable", function(){
$(this)[tog(this.value)]("x");
}).on("mousemove", ".x", function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]("onX");
}).on("touchstart click", ".onX", function( ev ){
ev.preventDefault();
$(this).removeClass("x onX").val("").change();
});
// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/*
Clearable text inputs
*/
.clearable{
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center).
That 18px padding will prevent the text hide underneath the icon (while visible).
jQuery will add the class "x" (if input has value) showing the clear icon.
Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX.
Clicking the onX class removes all classes, resets the input value and hides the icon.
7x7px gif:
Base64 string:
data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
Could I suggest, if you're okay with this being limited to html 5 compliant browsers, simply using:
<input type="search" />
JS Fiddle demo
Admittedly, in Chromium (Ubuntu 11.04), this does require there to be text inside the input element before the clear-text image/functionality will appear.
Reference:
Dive Into HTML 5: A form of Madness.
input type=search - search field (NEW) HTML5.
According to MDN, <input type="search" /> is currently supported in all modern browsers:
<input type="search" value="Clear this." />
However, if you want different behavior that is consistent across browsers here are some light-weight alternatives that only require JavaScript:
Option 1 - Always display the 'x': (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
el.addEventListener('click', function(e) {
e.target.previousElementSibling.value = '';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Always display the 'x':</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Option 2 - Only display the 'x' when hovering over the field: (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
el.addEventListener('click', function(e) {
e.target.previousElementSibling.value = '';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
display: block;
}
.clearable-input > [data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the 'x' when hovering over the field:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Option 3 - Only display the 'x' if the input element has a value: (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input'), function(el) {
var input = el.querySelector('input');
conditionallyHideClearIcon();
input.addEventListener('input', conditionallyHideClearIcon);
el.querySelector('[data-clear-input]').addEventListener('click', function(e) {
input.value = '';
conditionallyHideClearIcon();
});
function conditionallyHideClearIcon(e) {
var target = (e && e.target) || input;
target.nextElementSibling.style.display = target.value ? 'block' : 'none';
}
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the 'x' if the `input` element has a value:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
You could use a reset button styled with an image...
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
See it in action here: http://jsbin.com/uloli3/63
I've created a clearable textbox in just CSS. It requires no javascript code to make it work
below is the demo link
http://codepen.io/shidhincr/pen/ICLBD
Since none of the solutions flying around really met our requirements, we came up with a simple jQuery plugin called jQuery-ClearSearch -
using it is as easy as:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
Example: http://jsfiddle.net/wldaunfr/FERw3/
If you want it like Google, then you should know that the "X" isn't actually inside the <input> -- they're next to each other with the outer container styled to appear like the text box.
HTML:
<form>
<span class="x-input">
<input type="text" class="x-input-text" />
<input type="reset" />
</span>
</form>
CSS:
.x-input {
border: 1px solid #ccc;
}
.x-input input.x-input-text {
border: 0;
outline: 0;
}
Example: http://jsfiddle.net/VTvNX/
Change the text box type as 'search' in the design mode or
<input type="search">
EDIT: I found this link. Hope it helps. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html
You have mentioned you want it on the right of the input text. So, the best way would be to create an image next to the input box. If you are looking something inside the box, you can use background image but you may not be able to write a script to clear the box.
So, insert and image and write a JavaScript code to clear the textbox.
Use simple absolute positioning - it's not that hard.
jQuery:
$('span').click(function(){
$('input', $(this).parent()).val('');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
Vanilla JS:
var spans = document.getElementsByTagName("span");
function clickListener(e) {
e.target.parentElement.getElementsByTagName("input")[0].value = "";
}
for (let i = 0; i < spans.length; i++) {
spans[i].addEventListener("click", clickListener);
}
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
jQuery Mobile now has this built in:
<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">
Jquery Mobile API TextInput docs
Something like this??
Jsfiddle Demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.searchinput{
display:inline-block;vertical-align: bottom;
width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
outline: none;
}
.clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
width: 20px;
transition: max-width 0.3s;overflow: hidden;float: right;
display: block;max-width: 0px;
}
.show {
cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}
</style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">✗</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
$('input.searchinput').val('').focus();
$(".clear").removeClass("show");
});
});
</script>
</body>
</html>
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
You can do with this commands (without Bootstrap).
Array.from(document.querySelectorAll('.search-field')).forEach(field => {
field.querySelector('span').addEventListener('click', e => {
field.querySelector('input').value = '';
});
});
:root {
--theme-color: teal;
}
.wrapper {
width: 80%;
margin: 0 auto;
}
div {
position: relative;
}
input {
background:none;
outline:none;
display: inline-block;
width: 100%;
margin: 8px 0;
padding: 13px 15px;
padding-right: 42.5px;
border: 1px solid var(--theme-color);
border-radius: 5px;
box-sizing: border-box;
}
span {
position: absolute;
top: 0;
right: 0;
margin: 8px 0;
padding: 13px 15px;
color: var(--theme-color);
font-weight: bold;
cursor: pointer;
}
span:after {
content: '\2716';
}
<div class="wrapper">
<div class="search-field">
<input placeholder="Search..." />
<span></span>
</div>
</div>
Here's a jQuery plugin (and a demo at the end).
http://jsfiddle.net/e4qhW/3/
I did it mostly to illustrate an example (and a personal challenge). Although upvotes are welcome, the other answers are well handed out on time and deserve their due recognition.
Still, in my opinion, it is over-engineered bloat (unless it makes part of a UI library).
I have written a simple component using jQuery and bootstrap.
Give it a try: https://github.com/mahpour/bootstrap-input-clear-button
Using a jquery plugin I have adapted it to my needs adding customized options and creating a new plugin. You can find it here:
https://github.com/david-dlc-cerezo/jquery-clearField
An example of a simple usage:
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">
<table>
<tr>
<td><input name="test1" id="test1" clas="test" type='text'></td>
<td>Empty</td>
</tr>
<tr>
<td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
<td>Not empty</td>
</tr>
</table>
<script>
$('.test').clearField();
</script>
Obtaining something like this:
No need to include CSS or image files. No need to include that whole heavy-artillery jQuery UI library. I wrote a lightweight jQuery plugin that does the magic for you. All you need is jQuery and the plugin. =)
Fiddle here: jQuery InputSearch demo.
This is my code:
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#wrap {
width: 1000px;
margin: 0 auto;
}
.out_box {
float: left;
margin: 20px 20px 20px 20px;
border: 1px solid black;
padding: 0 5px 0 5px;
min-width: 280px;
}
input {
margin: 10px;
}
input {
vertical-align: -3px;
}
h1 {
font-size: 400%;
color: black;
margin: 0 0 10px 0;
text-align: center;
}
h2 {
font-size: 100%;
color: black;
margin: 5px 0 5px 0;
text-align: center;
}
h3 {
font-size: 95%;
color: black;
margin: 5px 0 5px 0;
}
h4 {
font-size: 200%;
color: black;
margin: 5px 0 5px 0;
text-align: center;
}
p, form, button {
font-size: 80%;
color: #252525;
}
.small_text {
font-size: 70%;
color: #737373;
}
body {
background-color: lightblue;
}
</style>
</head>
<body>
<div id=wrap>
<h1>Login</h1>
<form class="form1" action=”index3.htm”>
<div class="formtitle">
Enter the password to proceed
</div>
<div class="input nobottomborder">
<div class="inputtext">
Password:
</div>
<div class="inputcontent">
<input type="password" id="password" /><br />
</div>
</div>
<div class="buttons">
<input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == ’smurfsmurf’) location.href='index3.htm'; else alert('Wrong Password!');" />
</div>
</form>
</div>
</body>
</html>
When I make it redirect it does like this with the adress: file:///Volumes/ETHERNET/"index3.htm".
There is a file in that directory named index.htm, and that's the file I am trying to access. How do I fix it adding the "" signs?
Best Regards
Oskar
You have the wrong type of quotes in your form's action. Change this line:
<form class="form1" action=”index3.htm”>
for this:
<form class="form1" action="index3.htm">
Also, because your javascript is on a button that will, according to standards, submit the form, your javascript will not react as you expect. You should add a return false; into the code, and add your curly braces around your if statements, and remove the curved single quotes:
<input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == 'smurfsmurf') {location.href='index3.htm';} else {alert('Wrong Password!');}return false;" />
Although, personally, I would recommend against inline JavaScripting like that. Instead, use EventTarget.addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Scroll down to the example to see how it works.
Explanation:
Straight quotes are not technically necessary for HTML attribute values (I highly recommend using them anyway). You have not used straight quotes ("), but instead curved quotes (”), which never were valid for wrapping HTML attribute vales. Thus, the browser interprets your action on your form to be ”index3.htm” instead of index3.htm.
When you click your submit button, the default action is to submit the form to it's action attribute. So your browser is redirected to /”index3.htm”. Your JavaScript won't have time to kick-in and change your browser's location before you are redirected to the form's action's value.
Let me know if that explanation makes since.