So, I have a form.
I want to add a padding to the form fields. So, when people start typing, the text will appear with a nice gap between the sentences and the left border of the field...
I can use padding-left, but then the who field jumps to the left (but it does work for the text).
I am looking for CSS code that allows me to style the input text on its own.
I tried this code, but that won't work either.
input[type=text] {
padding-left: 20px;
}
EDIT: I posted a picture what happens when using padding-left on input[type=text]. It does work but on the right you can see what happens with the field. The field gets wider..
The issue is because padding gets added to the rendered width of a field.
Use the box-sizing property to solve it.
input[type=text] {
padding-left: 20px;
box-sizing: border-box;
}
Related
I have created a reusable search component, i am facing two issues on this.
overlapping the search text on the svg icon - enter more text on the input box
entering more text the text-indent not staying - text goes left side when more text is entered
I have added the codesandbox
For the overlapping text on the search icon, I would simply solve it by adding some padding to the input field.
input{
padding-right: 50px;
box-sizing: border-box;
}
For the text-indentation not staying while the input field is active, I'm not sure how to solve it in a clean way. You could add a div with the same background color and width as the indentation, and then just give it an absolute position.
Second Issue Workaround
Instead of using text-indent, we can use padding-left and it will work properly, kindly see this one SO
This might help with keeping the content of the input from overlapping the search icon.
.App {
font-family: sans-serif;
}
.css-btdvqp {
background:#e1e1e1;
border-radius: 2px;
}
.css-btdvqp .css-vrkvd {
width: 85%;
}
on this page I'm trying to position the "subscribe" box next to the input box.
so far i've floated all three left, but the final element isn't in the correct spot.
It would be better to tidy up your HTML, but failing that, this will do it:
#mc-embedded-subscribe-form .mc-field-group {
padding-bottom: 0;
}
#mce-responses {position: absolute;}
#subscribe {margin-left: 20px;}
Your clear class will remove the floating. If you remove that class the subscribe box will appear next to the input box. You will probably need some negative top margin or something similar to line it up correctly.
look at this at css
input {
display: inline-block;
}
That's why it isn't working the way you want.
By giving the div with id subscribe the class clear, it inherits clear:both. You need to remove it.
Meanwhile, also remove padding-bottom from #mc-embedded-subscribe-form .mc-field-group.
This should line up the button correctly.
Ive used negative margin to make a link larger than its container, and ive hidden the overflow of the parent element. My reasons for doing so are explained in this question:
Responsive navigation - keep links the same height when some wrap?
Here is a working fiddle: http://jsfiddle.net/uwEGj/
The issue is that the tap highlight shows the element being larger than its container. If you use a device like an iPhone on the link above you will see what I mean.
To solve this ive set the link to have this CSS rule:
-webkit-tap-highlight-color: rgba(0,0,0,0);
However I would like a tap highlight over the visible area of the link. I tried to set a tap highlight color to the li e.g. -webkit-tap-highlight-color: rgba(100,100,100,0.6); but it doesnt seem to do anything. See here: http://jsfiddle.net/uwEGj/3/
How can I have a tap highlight colour only over the visible area of the link?
Considering I understand your problem correctly - you are annoyed that the highlighted area overflows a bit over the edge of the link, as on the following image I've got from Google images to illustrate the problem:
AND you want all links to be same height no matter how much text they contain.
First I would correct the markup to fit your table-cell display logic. As you know a table has 3 main elements - table, table-row, table-cell - you are missing the table-row element which makes thing render improperly cross platforms.
I would do the HTML as following:
<div class="link-list">
<div class="link-list-row">
Link 1
Link 2 which has very very very long text and loger
Link 3
</div>
</div>
Than forget about the negative margin (-10em negative margin).
So change the CSS to the following:
.link-list {
display:table;
width:100%;
}
.link-list-row {
display:table-row;
}
a {
display:table-cell;
padding: 10px;
width:33.3%;
heigth:100%;
background: grey;
padding: 10px;
border: 2px solid red;
overflow:hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* disable the highlight */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Your highlight is now disabled and your <a> with longer text wraps to next line and also shorter <a> 's will still get same height since they are now displaying as cells.
Now in order to make the highlight as precise as possible you will need some simple javascript to toggle a class on tap events, since the highlight event is system bound.
Most simple solution is using jQuery obviously, but can be accomplished with pure javascript too if you can't use any frameworks.
$('a').on({
'touchstart' : function(){
$(this).addClass('tap');
},
'touchend' : function(){
$(this).removeClass('tap');
}
});
and add a class to your css for the tap event:
a.tap {
background:green;
}
Now you can style your hightlighted state as you wish + the highlight will work on non-webkit browsers also.
Working sample (try on touch enabled device): http://jsfiddle.net/7M6Ey/2/
I have two buttons, one implemented as an input, the other as a span. They are put side by side with:
{ display:inline-block; }
The buttons are rendered from a customized tag and a class name is added dynamically in jsp. In css, there are some definition for shadow, for background gradient, for padding, and for font. They do use some CSS3 like border-radius.
But in Firefox, the height of the span button is 18 while the input 20. Interestingly, the height of them in IE 8 are both 25px, why?
Now I need them to be of the same height and aligned horizontally.
Update:
Now I have those two buttons in jsfiddle. Use height:22px; and vertical-align:top; won't help much.
http://jsfiddle.net/gBeCP/
Try setting the vertical-align:top on the input tag. I recommend specifically setting the dimensions in px as this will prevent the browser from applying defaults.
I think I have it done.
Answer in this page indicates that FF treats the padding differently in submit type of input and a span. CSS padding added to height/width for <input type='submit'>
My solution is to set a min-height of both input and span, then use vertical-align:middle; to have them aligned. Finally play around the padding number to have the text on the buttons aligned.
The reason it's different is because each browser has its own default styles so they will vary... just like javascript varies dramatically.
Have you ever thought about actually setting some height on the elements that you want to be the same height?
maybe
span, input[type="button"] {
height: 25px;
}
Or more specifically if you like.
The easiest solution is the following two lines (vendor-prefixes removed for brevity):
.tranCoreButton {
/* I couldn't be bothered to read through the rest of the CSS, or the
in-line CSS; seriously: *minimal* reproductive demo, please... */
display: inline-block;
box-sizing: border-box;
}
JS Fiddle demo.
Newbie question here. I have a navigation bar with padding in all of my li's, and I want to be able to target the ahref when you click in the padding. Would this be done with onclick/javascript for each li? or is there a simple CSS method?
Also I have a search bar, that I want to focus by clicking on it's padding as well. I assume this would require a similar method.
First, you must set display:inline-block as a property for your links. Then, remove the padding from your list-item and apply it to the links.
Your CSS should reflect the following:
li a {
display: inline-block;
padding: 10px;
}
Here's a fiddle for a working example.
maybe you could specify:
li.someclass a {
display: inline-block; //or display:block;
width: 100%;
height: 100%;
}
(remember to specify width/height of parent container aswell)
not sure if i got you right though
Set the padding to the anchor instead of to the li.
See http://jsfiddle.net/FBsKH/ and compare.
About the search bar, can you post some code?
If I add padding to a <input type="text" /> and I click it on it's padding, it gets focus (tested on Firefox and Chrome). See it here: http://jsfiddle.net/fnsRu/
Edit:
Ah, now I understand what you want with the search bar.
The problem is that AFAIK with CSS you can't set focus to an element.
Then, you can:
Remove paddings: http://jsfiddle.net/fnsRu/3/
Use JavaScript: http://jsfiddle.net/fnsRu/4/