I want to make input box stays at center of a form, but I cannot make it work even using margin: 0 auto; or display: inline-block;
#message {
width: 90%;
...
margin: 0 auto;
}
Demo
margin: 0 auto works only with block elements, so :
#message {
margin: 0 auto;
display:block;
}
JSFiddle
Try this simple way:
<form id="subform" autocomplete="off" style="text-align:center">
<input id="message" placeholder="message goes here" type="text">
</form>
Add text-align:center to #subform
Input acts as inline-block element which you can simply align by giving text-align property to parent
#subform {
text-align: center;
}
#message {
width: 90%;
max-height: 25px;
line-height: 27px;
text-indent: 10px;
font-size: 1em;
color: #333;
background: none repeat scroll 0% 0% #FFF;
border-right: 1px solid #D9D9D9;
border-width: 1px;
border-style: solid;
border-color: #C0C0C0 #D9D9D9 #D9D9D9;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
margin: 0 auto;
}
<form id="subform" autocomplete="off">
<input id="message" placeholder="message goes here" type="text">
</form>
Try this simple way -
<input type="text" style="text-align:center;" >
Related
I made some input boxes with 0 20px padding placeholders. However the text I type inside ignores padding and starts from the exact left side (from the left outline). Is there any possibility to position it inside the input field?
HTML:
<div class="input-border">
<label for="sign-login"><i class="fas fa-envelope"></i></label>
<input type="text" name="sign-login" placeholder="Enter your Email">
</div>
CSS:
input::placeholder {
font-size: 16px;
font-family: $font-base;
color: #979797;
padding: 0 20px;
height: 38px;
}
.input-border {
width: 340px;
margin: 10px 0;
border: 1px solid #DEDEDE;
border-radius: 0.5em;
}
I'd like the text I type to start from the same place as my placeholder is
in this case with 0 20px padding.
target the input text input[type=text]{padding:0 20px;}
input::placeholder{
font-size: 16px;
font-family: $font-base;
color: #979797;
padding: 0 20px;
height: 38px;}
.input-border
form .input-container .input-border {
width: 340px;
margin: 10px 0;
border: 1px solid #DEDEDE;
border-radius: 0.5em;}
input[type=text]{padding:0 20px;}
<div class="input-border">
<label for="sign-login"><i class="fas fa-envelope"></i></label>
<input type="text" name="sign-login" placeholder="Enter your Email">
</div>
Use this to add padding to the placeholder.
input::placeholder {
padding: 0 20px;
}
Use this to add padding to input text.
input {
padding: 0 20px;
}
CSS:
.center {
text-align: center;
margin: 0;
}
I picked a good css/html code for implementation of search box on the web. But I can't move the search box to center. The below css code is about search box.
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search"/>
<input type="button" name="search_button" id="search_button"/>
</form>
</li>
What should I fix the code for aligning the search box?
Thanks.
Try providing text-align: center to your body.
Refer code:
body {
text-align: center;
}
#search {
width: 357px;
margin: 4px auto;
text-align: center;
display: inline-block;
}
#search_text {
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search" />
<input type="button" name="search_button" id="search_button" />
</form>
</li>
If you want to align the text in the center of the textbox than use #nashcheez answer.
If you want to align the searchbox itself to the center of the parent than:
Set the textbox to display block
Give a with to the textbox
Set margin-left to auto
Set margin-right to auto
You may have to set position to relative.
you can try to use:
#search {
width: 357px;
margin-right: auto;
margin-left: auto;
}
if its being overridden, try using:
#search {
width: 357px;
margin-right: auto !important;
margin-left: auto !important;
}
If li#search is all you've got, try this:
#search {
width: 357px;
margin: 4px auto;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search"/>
<input type="button" name="search_button" id="search_button"/>
</form>
</li>
I'm not sure if all browsers do this but if I provide a for attribute on a label that corresponds to an input's id, this makes hovering over the label trigger the input's hover styles which is undesirable in my case. Is there any way to stop this behavior while still having a form accessible to screen readers?
.field label {
display: block;
margin: 0 0 0.5em 0;
}
.field input {
background: white;
border: 1px solid #999;
border-radius: 0px;
color: black;
display: inline-block;
padding: 0.5em 0.7em
}
.field input:hover {
background: #efefff;
border-color: #333;
}
<div class="field">
<label for="myInput">Hover over this label:</label>
<input id="myInput" type="text">
</div>
You can use pointer-events:none; to disable hover effect for any element.
.field label {
display: block;
margin: 0 0 0.5em 0;
pointer-events:none;
}
.field input {
background: white;
border: 1px solid #999;
border-radius: 0px;
color: black;
display: inline-block;
padding: 0.5em 0.7em
}
.field input:hover {
background: #efefff;
border-color: #333;
}
<div class="field">
<label for="myInput">Hover over this label:</label>
<input id="myInput" type="text">
</div>
this is my first question here.
I'm having an issue getting my html form buttons side by side.. can somebody take a look and tell me whats wrong? it'd seem like they should by default be placed inline, but I guess that isnt the case.
Here is my html code.
<input type="submit" name="1" formtarget="" value="1">
<input type="submit" name="2" formtarget="" value="2">
<input type="submit" name="3" formtarget="" value="3">
<input type="submit" name="4" formtarget="" value="4">
and here is the CSS for the form input and individual name
#form input {
position: relative;
display: inline;
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
line-height: 44px;
-webkit-appearance: none;
}
and this is the same for each button besides the color changes.
#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
#form input[name="2"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
Can someone help me set this up so that they are inline, side by side?
EDIT: This is what it shows.
http://jsfiddle.net/g01juc2z/2/
you have 4 elements set to width:50% which equals 200% width. Change them to width: 24% (inline-block elements have a natural spacing of 1 or 2px) or less and they will be aligned:
#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 24%; <---------------
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
FIDDLE
in your css make these change where you write
[name="1"]
replace it with
[type="submit"]
and do not repeat it like a name
and another change is
width:24%;
I am trying to achieve following feature:
It's an input box, has 4 digits, once clicked, user can input 4 digits.
It's part of a mobile app.
Currently what I have achieved is : example, note that for some reason,
outline: none; works fine in my app but not work in this jsFiddle example.
My question is how to draw the 3 separation bar and also display those digits
just fit their position within it?
Is it achievable using css?
below are code:
<form id="login" class="ui-shadow-around ui-corner-all-input" data-enhance="false">
<div data-role="fieldcontain">
<span>
<input type="tel" name="retailer_pin" maxlength="4" class="numbersOnly" required="" placeholder="" style="outline: none;">
</span>
</div>
<input type="submit" class="submitHidden">
</form>
css:
.ui-corner-all-input {
-webkit-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
width: 35%;height: 3.5em; margin: 0 auto; margin-bottom: 44px;
margin-top: 24px;
}
.ui-shadow-around {
-moz-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
border: 1px #b6b6b6 solid;
}
*:not(input):not(textarea) {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
FORM[data-enhance="false"] INPUT, textarea {
outline: none;
}
FORM[data-enhance="false"] SPAN {
overflow: hidden;
display: block;
padding: 0 10px 0 0px;
text-align: left;
}
.submitHidden {
visiblity: hidden;
position: absolute;
opacity: 0;
}
Here is my take on the problem.
It uses a proper input element (please don't make the life of your users harder than it already is) and a transparent background to render 4 blocks in the background.
.input-widget {
vertical-align: top;
margin-left: 1rem;
font-size: 2rem;
display: inline-block;
position: relative;
}
.input-widget .input {
width: 8rem;
font-size: inherit;
font-family: inherit;
letter-spacing: 5px;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.input-widget .input::-webkit-inner-spin-button,
.input-widget .input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-widget .digit-background {
position: absolute;
top: 1px;
left: 0;
z-index: -1;
}
.input-widget .digit-background .digit {
display: inline-block;
float: left;
}
.input-widget .digit-background .digit::before {
content: '0';
color: lightgray;
background-color: currentColor;
display: inline-block;
padding: 1px;
margin: -1px 4px 0 -1px;
}
<div class="input-widget">
<input type="number" max="9999" class="input" value="01234">
<div class="digit-background">
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
</div>
</div>
And a SCSS version is here: https://jsfiddle.net/cburgmer/0xgtdyLj/1/
You could do it like this:
HTML:
<table>
<tr>
<td><input class="clock" type="text" maxlength="1" size="1" onkeyup="next(2)"></td>
<td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeyup="next(3)"></td>
<td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeyup="next(4)"></td>
<td><input id="4" class="clock" type="text" maxlength="1" size="1"></td>
</tr>
CSS:
.clock {
color:darkgray;
border-style:none;
width:40px;
height:60px;
font-size:60px;
}
td{
border:2px solid darkgray
}
table {
border-collapse:collapse;
}
JavaScript:
function next(next) {
document.getElementById(next).focus();
}
Link: http://jsbin.com/uhaHunuq/1/edit?html,output
Maybe you can use four text input items and put them in a small table. With JavaScript, make each text box take one character and give the focus state to the next text box. The lines could be done with the table border and box. Use the CSS to hide the text box frame.