How to decrease offset between text and top border in button. I'm trying to set line-height, but it's not working in Firefox: Fiddle
CSS:
input[type="button"]
{
border-color: #D2D2D3 #79797A #4D4D4E #C0C0C1;
border-style: solid;
border-width: 1px;
height: 16px;
line-height: 7px;
padding: 1px;
width: 16px;
background: #d8dadb;
}
HTML:
<input type="button" value="+" />
Your setting a hard width and height. Take those out or set them to auto and your button will respond to padding adjustments.
input[type="button"]
{
border-color: #D2D2D3 #79797A #4D4D4E #C0C0C1;
border-style: solid;
border-width: 1px;
line-height: 7px;
padding: 1px;
background: #d8dadb;
}
Firefox bug (feature)
http://www.cssnewbie.com/input-button-line-height-bug/
This could help a little:
button::-moz-focus-inner {border: 0; padding: 0;}
Related
I would like to make the icon of the material mat-datepicker so it fits inside my div without any margins or padding around it.
My code is:
<div class="container">
<input [matDatepicker]="datePicker1" type="hidden" class="dp">
<mat-datepicker #picker class="dp"></mat-datepicker>
<mat-datepicker-toggle class="dp" [for]="datePicker1"></mat-datepicker-toggle>
</div>
SCSS
.container{
border-width: 1px;
border-style: solid;
border-color: silver;
}
::ng-deep .dp {
padding: 0;
margin: 0;
font-size: 10px;
border-width: 1px;
border-style: solid;
border-color: red;
height: 12px;
width: 12x;
line-height: 12px;
min-height: 12px;
}
I would like to see the red border around the icon touch the gray border of the div on the bottom and on the top ( or all around). Please advise how to access the proper properties to achieve this.
TLDR;
I have a CSS input form which consists of 4 number inputs for each direction and it sets margins. When I submit auto, auto margins make element positioned in center horizontally. When I give 0px, It sets it to 0px which is really a value of "0px", and it doesn't provide an auto like untouched property. Is this possible?
I wondered if there is something like this: For example I have a CSS definition like this:
border-width: 4px;
and on some case I want to change the width of only left and right borders:
border-left-width: 2px;
border-right-width: 2px;
Instead of writing this, I can't write these:
border-width: initial 2px;
border-width: inherit 2px;
border-width: unset 2px;
because they seem to be invalid values in chrome developer tools.
Is there anything else I can use to do this?
function toggleClasses(){
document.querySelectorAll(".div").forEach(function(elem){
elem.classList.toggle("toggled");
});
}
.div {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
background: #eee;
border-color: #333;
border-width: 4px;
border-style: solid;
}
.div.div-1.toggled {
border-width: initial 2px;
margin: initial 10px;
}
.div.div-2.toggled {
border-width: inherit 2px;
margin: inherit 10px;
}
.div.div-3.toggled {
border-width: unset 2px;
margin: unset 10px;
}
<div class="div div-1"></div>
<div class="div div-2"></div>
<div class="div div-3"></div>
<input type="button" onclick="toggleClasses();" value="Togggle" />
Although I'm using the same CSS for both <input> and <select>, text in <select> gets cut off, while the text in input is perfect. Why is this happening and how to fix it?
input,
select {
box-sizing: content-box;
width: 90%;
height: 23px;
padding: 10px;
font-family: TheBoldFont;
font-size: 27px;
color: #f26e7c;
border: 4px solid black;
border-radius: 12px;
}
<input type="text" value="xxxxxxx">
<select>
<option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>
This is the result:
And this is what show up on hover in Developer tools of Google Chrome:
Firstly remove the height: 23px; declaration.
Notice the the text is not cut anymore, however the elements have a greater height than what was needed.
To fix this, just change the padding to padding: 6px 10px;
FIDDLE
input,
select {
box-sizing: content-box;
width: 90%;
padding: 6px 10px;
font-family: TheBoldFont;
font-size: 27px;
color: #f26e7c;
border: 4px solid black;
border-radius: 12px;
}
<input type="text" value="xxxxxxx">
<select>
<option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>
Increase the line-height of the select by a few pixels.
This worked for me.
Changed this:
select {
line-height: 15px;
}
To:
select {
line-height: 17px !important;
}
It happens because of the padding. Consider only using padding left and right, combined with min-height.
You could increase the height of the select item:
select{
height: 40px;
}
This question already has answers here:
iOS forces rounded corners and glare on inputs
(6 answers)
Closed last month.
I have a site which is working properly except for the input field and submit button next to it. They are not showing properly on iPad. The height of the input box is slightly more than the submit button, making it look weird.
What I think is that Safari mobile has different viewports(1024px) etc, but renders the same WebKit appearance as of Chrome. Then why the input box is showing different on iPad?
Here is how it looks in Google Chrome on my desktop:
And here is how it looks on iPad:
The HTML part goes simply as:
<div id="search-form">
<input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
<input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>
And the CSS for the same is:
#search-form {
overflow: auto;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 26px;
}
input#Search {
-webkit-appearance: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.defaultText {
width: 88%;
padding-left: 4px;
height: 29px;
float: left;
background-color: #f7f7f7;
border-right: 0px solid #666;
border-bottom: 1px solid #666;
border-color: #999;
margin-right: -33px;
}
.defaultTextActive {
color: #999;
font-style: italic;
font-size: 15px;
font-weight: normal;
}
.search_btn {
font-size: 13px;
font-weight: bold;
height: 34px;
cursor: pointer;
float: right;
margin: 0;
width: 33px;
background: url("../images/search.jpg") no-repeat;
text-indent: -99999px;
border: 1px solid #999;
border-top: 2px solid #000;
margin-top: 0px;
margin-right: 1px;
}
As you can see, the border effects of input are also not being rendered properly in iPad. Anyone have any clue about it?
This snippet of CSS will remove the default WebKit styling from your textboxes:
input[type="text"] {
-webkit-appearance : none;
border-radius : 0;
}
Works on iOS 7 too.
Try to use -webkit-appearance to get rid of the default styles.
Check this answer: iOS forces rounded corners and glare on inputs
I am having problem to set the div border , which using the border-radius.htc.
It works in all browsers except IE.
I referred this site to make a div as rounded corners http://dimox.net/cross-browser-border-radius-rounded-corners/
My HTML will be,
<div id="div1">
<input type="text" id="txtBox" />
</div>
CSS will be,
#div1 {
width: 200px;
height: 30px;
background-color: #D1C9CC;
border-style: solid;
border-width: thin;
border-color: red;
-webkit-border-radius : 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(jquery/border-radius.htc);
-webkit-border-radius: 10px;
}
#txtBox {
width: 180px;
height: 20px;
background-color: transparent;
position: relative;
top: 5px;
left: 10px;
border-style: none;
}
My need to set the textbox rounded corner with border of red color in the IE. How can I modify this ?
Good answers are definitely appreciated.
You may need to select F12 on your keyboard while inside of IE and check which document mode you are in. Anything below IE 9 will not work.