I want to put left and right space to text inside of as you can see on image.
I was able to put left space with text-indent but it doesn't seem to work for right space.
Can anyone help me?
sample image
Here inputs can have left right padding to act for indent.
input {padding: 0 5px}
So above inputs will carry 5px of space inside to both left and right.
if you want it in one text box then add class like below and use it in the css
<input type='text' name='firstname' class='space'>
.space
{
padding-left : 10px;
padding-right: 10px;
}
If you want both side you can use padding only.If you use like this it will work when you have appropriate space in the window.If you want to keep the space in at any screen size you can use border-box.
.space
{
padding-left : 10px;
padding-right: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Well one option would be to combine text-indent with a padding if your markup allows it:
text-indent: 10px;
padding-right: 20px;
Another method I guess could be the "direction" attribute with a value of "rtl" in combination with "text-align:left".
please try following code
input{
border: none;
padding: 10px;
margin: 10px;
height: 20px;
width: 500px;
border:1px solid #eaeaea;
outline:none;
}
input:hover{
border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9;
}
input:focus{
border-color:#4d90fe;
}
<div class="mainDiv">
<input type="text" />
</div>
You can set some padding to your input text :
input {
padding: 0 5px /* 0 is for top and bottom | 5px is for left and right */
}
Here the doc on the CSS padding property : https://www.w3schools.com/css/css_padding.asp
Related
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
I want to align the checkbox, label and text input in a same line using css. I can do it by using the default template of the browser.
However I really liked the simple theme given in this link. The theme has label and a input text. I wanted to add a checkbox as well at the beginning of the line. Somehow adding a checkbox inside the div makes the arrangement awry.
Though its better to look at the code in the link, I am providing a snapshot here:
HTML
<form>
<div>
<!--NEED TO ADD CHECKBOX HERE -->
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
</form>
CSS3
/* Onto the styling now. Some quick generic styles first. */
html, body {
width: 100%; height: 100%;
}
body {
font-size: 76%;
font-family: Verdana;
background: #eee;
padding: 50px 0;
}
form {
background: #fafafa;
padding: 20px;
width: 400px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
p.s: It will be delightful if someone can stylize the checkbox in the same way as the example
try this one,
form input[type="checkbox"] {
width:20px;
}
<div>
<input type="checkbox" >
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
http://jsfiddle.net/KW6AY/1/
Here you go \w quick styling:
http://codepen.io/daniesy/pen/puema
alter the css to input[type="text"] and lower the width to around 60% (so it won't affect your checkbox), add a checkbox with a float left
just rename class
form input into form input[type="text"]
Good luck.
I'm trying to setup a clean CSS to style a button to visually looks merged with the near input field.
I'm using this CSS currently:
button {
position: relative;
left: -4px;
box-sizing: border-box;
padding: 0 10px;
margin: 0;
font-size: 17px;
border: 1px solid gray;
border-radius: 0 3px 3px 0;
}
http://jsfiddle.net/GRwqL/
The main problem is the usage of the left property, I don't think it's a good practice, mostly because it's not handled correctly on all browsers.
The other problem is that this code in Internet Explorer and Firefox makes the button not high as the input field.
So I was looking for some help to write a better code cross-browser and cleaner.
Personally I don't care if is needed a wrapper element or any other HTML element, I just need a clean code, cross browser and that works well.
<span class="inputWithButton">
<input type="text"><button>Submit</button>
</span>
input, button{outline: none;}
.inputWithButton{
display:inline-block;
overflow:hidden;
border:1px solid gray;
border-radius: 3px;
}
.inputWithButton > *{
vertical-align:top;
border:0;
margin:0;
padding: 3px 10px;
}
.inputWithButton > input[type=text]{
width:150px;
}
.inputWithButton > button{
border-left:1px solid gray;
background:#eee;
cursor:pointer;
width:70px;
}
.inputWithButton > button::-moz-focus-inner {
border: 0;
}
DEMO with higher paddings and different borders colors : http://jsbin.com/OPiroyib/4/edit
(Just remove border from the span and add border to both input and button) That easy.
You need to override the default margin on the input element too.
jsFiddle example
input, button {
margin:0;
}
In doing so, there will no longer be space between the elements, assuming there is also no space between them in the markup. Note, that inline elements respect the whitespace in the markup.
For instance, even after resetting the default margin there is space between the elements, if there is space between them in the markup (example)
For your second problem (making the elements the same height), do the following:
input, button {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding:0;
margin:0;
vertical-align:top;
line-height:30px;
height:30px;
}
Basically, use box-sizing to change the box model, again reset the margin/padding, use vertical-align:top for alignment issues, and then set an equal line-height/height on both elements.
jsFiddle example
Take a look at css-reset or normalize.css to set the defaults in all browsers to "null".
Also css frameworks like bootstrap are very cool!
Have you thought about using a simple span tag instead of a button and then attach an onclick event to it?
The following seems to work ok for me - though you might need to use a reset / modenizer style sheet to make it more predictable on different browsers.
http://jsfiddle.net/GRwqL/13/
<input class="nospace"></input><span class="nospace">Submit</span>
.nospace {
margin: 0;
padding: 0;
}
span.nospace {
height: 1em;
margin: 0;
padding: 1px;
border: 1px solid black;
}
Is there any way to alter the text property inside label so that it touches the baseline? In the example, both State and City are above the baseline.
http://jsfiddle.net/6VzLR/
HTML:
<div id="leftContent">
<div id="state">
<label for="state">State:</label>
<select name="state">
<option>State - Karnataka</option>
</select>
</div>
<div id="city">
<label for="city">City:</label>
<select name="city">
<option>City - Bangalore</option>
</select>
</div>
</div><!--leftContent-->
CSS:
#state label, #city label{
width:40%;
display:inline-block;
margin: 3px 0 3px 6px;
}
If you specify a height for the label you can use line-height to adjust where the text will be:
#state label, #city label{
width:40%;
display:inline-block;
border:1px solid #000000;
margin: 3px 0 3px 6px;
line-height: 28px;
height: 20px;
vertical-align: bottom;
}
Here's the JSFiddle.
EDIT: You can add
#state select, #city select {
margin-bottom: 4px;
}
So the select boxes are positioned the same as well.
Here's the updated JSFiddle.
The order of margins in CSS margin property is top-right-bottom-left.
So it looks like you are setting 0px for right margin, not for bottom one.
Try this:
margin: 3px 3px 0px 6px;
Or:
margin-bottom: 0px;
I would persionally better explore padding css option though.
I applied the following CSS to your HTML snippet:
label, select {
font-family: arial;
font-size: 2.0em;
vertical-align: baseline; /* default value */
}
label {
border: 1px solid gray;
width:40%;
display:inline-block;
margin: 3px 0 3px 6px;
text-align: right;
}
and got the following result: http://jsfiddle.net/audetwebdesign/3CQbq/
The text in the label and the select elements align along a common baseline, which is more obvious if you increase the font size.
However, you need to make sure that the same font family and font size are used in both the label and the select fields to get the same alignment. (In your example, this does not seem to be an issue even though the fonts differ.)
In your example, the text align along the same baseline and the bottom of the two boxes also align along a common horizontal line.
However, the box around the label is taller than the box for the select group, so that may be what you are trying to fix.
I will make a jQuery plugin for one of my projects, and I am trying to simulate an input with divs and spans to make it "richer".
Instead of having [ input ], I will have [ span (containing a A for removing) + input] so the user will not see the difference because he will be typing on a real input without borders, and the result (when accepted) will appear in a small rectangular box at the left of the field.
But I have one problem: there's always a gap between the top of the div and the span containing the left text. Same for the input, the two do not have the same margin for the top and bottom.
I am trying to remove that incorrect top margin (or padding), it looks like 3px from the top and 2px for the bottom. I seem to have tried everything and I always end up to have too much pixels on the top of the span & input.
I have reproduced my problem here (only a few lines of css code):
http://jsfiddle.net/JB9Uq/1/
<div class="input-reference"><span>Content in span <i class="icon-remove">x</i></span><input type="text"></div>
I'd need some assistance on that, I tried margins, paddings, line height, display:inline-block... but it still does not seem to work.
Thank you for your help.
I think that is what you looking for
1. add a float left
2. add height and line height
<div class="input-reference"><span>Content in span <i class="icon-remove">x</i></span><input type="text"></div>
input, textarea, span {
font-family:sans-serif;
font-size:12px;
outline: none;
margin: 0;
border: 1px solid transparent;
}
.input-reference{
display: inline-block;
border: 1px solid #DDDDDD;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-reference:after{
content: "";
display: block;
clear: both;
}
.input-reference span,
.input-reference input{
display: inline-block;
float: left;
padding: 0 5px;
/*adjust your height here*/
line-height: 20px;
height: 20px;
}
.input-reference span{
background-color: #53A9FF;
color: #fff;
}
UPDATE
check jsfidle
http://jsfiddle.net/c5q7hauv/