I have two buttons in an html template, one inside a form, the other outside of it. How do I style them via CSS such that they appear inline? Including display: inline in the second button doesn't work.
E.g. looking at the following snippet, how would OK_1 and OK_2 appear inline (using CSS only):
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>
TRY THIS:
Here is a runnable snippet.
form input[type="submit"] {
display: inline-block;
padding: 10px;
background-color: #000000;
color: #ffffff;
float: left;
margin:5px;
}
.button {
display: inline-block;
padding: 10px;
background-color: #000000;
color: #ffffff;
border: 0;
float: left;
margin:5px;
}
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button class="button">OK_2</button>
You can customize all the styles above.
Simply make the parent a flex container:
body { display: flex; }
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>
In a flex formatting context, flex items (the child elements in a flex container) line up in a row by default.
Adding display: inline-block should do the trick.
form {
display: inline-block;
}
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>
You should give the form a class, so that other forms won't do that.
form.inline_after {
display: inline-block;
}
<pre>↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓The form element is <span style="border: 4px dotted red; color: magenta; background-color: maroon;">in red</span>!↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓</pre>
<form style="border: 4px dotted red; color: magenta; background-color: maroon;" class="inline_after" action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input style="margin: 5px; padding: 5px; color: magenta; background-color: maroon;" class="inline_after" class="button" type="submit" value="Button in the form!" onclick='alert("This is in the "+this.parentElement.nodeName+" element!")'>
</form>
<button style="padding: 5px;" onclick='alert("This is in the "+this.parentElement.nodeName+" element!")'>
Button out of the form, but inline!
</button>
Make css for the form :
form {
float: left;
margin-right: 10px;
}
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>
This is a short answer :)
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.
I've been following tutorial on styling checkboxes using only CSS3 and here's what I came up with:
DEMO:
http://cssdeck.com/labs/jaoe0azx
Checkboxes are styled just fine - but when I tab through form controls -> checkbox is being skipped. Any advice why?
HTML:
<form role="form" id="login_form" data-mode="login">
<div class="form-group">
<label for="ue">Username or email:</label>
<input type="email" class="form-control input-lg" name="ue" id="ue" placeholder="" />
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control input-lg" name="password" id="password" placeholder="" />
</div>
<div>
<input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" />
<label for="rememberme" class="checkbox_1" tabindex="0">remember me</label>
</div>
<div id="auth_area_login_button">
<button class = "btn btn-lg btn-primary">
Login
</button>
</div>
</form>
CSS:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
#login_form{padding:20px;}
label.checkbox_1 {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin: 0px;
}
label.checkbox_1:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 0px;
}
label.checkbox_1:hover:before{border-color:#66afe9;}
input[type=checkbox].checkbox_1 {
display: none;
}
input[type=checkbox].checkbox_1:checked + label.checkbox_1:before {
content: "\2713";
font-size: 15px;
color: #A0A0A0;
text-align: center;
line-height: 15px;
}
EDIT 1:
seems to work in firefox, but not in chrome...
Input must be accessible to receive focus. It works in chrome/chromium if you add following lines.
input[type=checkbox].checkbox_1 {
opacity: 0;
}
input[type=checkbox].checkbox_1:focus + label.checkbox_1:before {
border: 1px solid #66afe9;
}
Since the real checkbox is hide with display:none you can't focus it but you can also don't hide the element just make it be under the :before of the label:
input[type=checkbox].checkbox_1 {
position: absolute;
width: 16px;
height: 16px;
margin: 0;
border: 1px solid transparent;
margin-top: 3px;
}
Check this http://cssdeck.com/labs/pl4ljry7
Tested in Chrome
Because, it is not a checkbox.
Look at the css:
input[type=checkbox].checkbox_1 {
display: none;
}
The checkbox is actually hidden. So, you will not be able to focus it. The stylized square and checkmark shown are through the :before pseudo element on label. Pseudo-elements can't be focused. Nor can the labels.
I know this is an old question, but I came up with a Jquery solution when the CSS solution didn't work for me, and thought others might find this helpful. I wrapped the input in a div with the desired tabindex value and the class "checkbox-add-tabindex". Then, using Jquery, I transferred the tabindex from the div to the input.
HTML:
<div class="checkbox-add-tabindex" tabindex="10">
<input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" />
<label for="rememberme" class="checkbox_1" tabindex="0">remember me</label>
</div>
Jquery:
$(".checkbox-add-tabindex").focus(
function () {
var tabval = $(this).prop("tabindex");
$(this).removeAttr("tabindex");
$(this).children(":first").attr("tabindex", tabval);
$(this).children(":first").focus();
})
I am trying to remove a border from a input text field for my contact form.
Basically, everytime when I enter any data into the input text field (Name field) and then move on to the next field which is email, the input text field sort of has a border around it that might be invisible of some sort.
I tried my best to mess around with the CSS to make it work, but somehow its not working.
HTML
<section id="contact">
<div class="container">
<h3 class="contact-section-title">Need advice?</h3>
<p class="contact-section-sub-title-form">Drop me an email below.</p
<div class="grid-row col-2">
<div class="grid-unit3">
<form name="form1" method="post" action="contact.php" >
<input name="cf_name" placeholder="What is your name? (Eg: John Doe)" type="text" required />
<input name="cf_email" placeholder="What is your email? (Eg: johndoe#johndoe.com)" type="email" required />
<textarea rows="4" cols="50" name="cf_message" placeholder="Please enter your message" class="message" required></textarea>
<button class="submit" type="submit">Send email</button>
<br><Br><br><Br>
</form>
</div><!--class="email" type="email"-->
</div>
</div>
</section>
JSFiddle
Would appreciate some solid help on this. Don't know where to go from here.
Thank you.
Changes I made ->
border:0px solid #58B9FA;
line 105.
The reason is because you add border:1px solid #58B9FA; to all input element. Fix it by replacing it with:
input {
border: 0
}
Updated Fiddle
Changed the border property in css from following
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:1px solid #58B9FA; }
to
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:0px solid #58B9FA; }
set border: none; or border:0 in your input css
FIDDLE
I have the below jsfiddle I need to know how should I increase the space for error message in span so that the entire message is displayed correctly.
JSFiddle
<form method="post" action="" id="subscribeForm" name="subscribeForm">
<fieldset>
<label>Name: </label><input type="text" class="effect" name="name" id="name" autocomplete="off" >
<span id="nameInfo">What's your name?</span>
</fieldset>
<fieldset>
<label>Email: </label><input type="text" class="effect" name="email" id="email" autocomplete="off" >
<span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
</div>
<div id="success">
<strong>Data Saved Successfully.</strong>
</div>
</form>
CSS Code
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm span{
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
JSFiddle
Try increasing the height of the fieldset.
fieldset {
overflow:hidden;
border:0;
height:50px;
margin:3px 0;
}
JSFiddle
Increasing the width of the fieldset or the form will display the error text fully.
So try,
form {
...
width: 285px;
...
}
if you do not want to display bigger form try to set the width of fieldset alone like,
fieldset {
...
width: 270px;
...
}
Check the demo here
, i have set the width of the fieldset here, form size is not changed.