I have this input type:
input[type=number] {
width:9vw;
height:10vw;
max-width:42px;
max-height:52px;
text-align: center;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius:1px;
text-align:center;
border:3px solid black;
display:inline-block;
margin-left:6%;
background-color:black;
color:white;
}
<input type="number" MIN="0" MAX="15" default="2" >
I noticed that the display changes with different browsers. I I would set the arrows always visible and which cover the entire height. I would only white arrows on a black background. I need also to set default value to 2. thanks for your help
As durbnpoisn said, you can simply set a value attribute to fix your default value problem.
Since you gave your input field a type, you're referencing to the HTML5 input field, which automatically includes those arrows. To get some custom arrows, you have to play around with -webkit-appearance: none;. In order to do so, I've found 2 simple explanations to achieve this here and here.
Combined together this would look somehow like this:
<input type="number" value="2">
input[type=number] {
width: 9vw;
height: 10vw;
max-width: 42px;
max-height: 52px;
text-align: center;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
text-align: center;
border: 3px solid black;
display: inline-block;
margin-left: 6%;
background-color: black;
color: white;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
You can also check this in a little fiddle.
You don't use default. You use value:
<input type="number" MIN="0" MAX="15" value="2" >
Your min and max will be ignored. That should be handled with Javascript.
That is not true. It actually works fine. Plus, it even auto-filters bad values.
As far as the looking different part... You have a condition in your style to allow for different browsers. That may or may not be overridden at render time.
Related
I am new to css/html and want to know the css style for the input control of type number. I am getting the default style(two arrows one in one column) with the following code.
<input type="number" placeholder="0">
Default Style:
But i want the css style for the image given below(Highlighted with red circle).
I know with the similar question asked previously
Customize appearance of up/down arrows in HTML number inputs
here it gives the following spin control which i don't want.
My requirement is very specific to the 2nd image which i have attached.
Yes, you can (webkit only I assume):
<style>
input[type=number] {
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0 8px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]:hover::-webkit-inner-spin-button {
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
</style>
<input type="number" value="0">
See JSFiddle method 1
See JSFiddle method 2
Reference
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.
Because it is just 1px I can't tell if it is the text box next to the button or the button itself. So I was going to take a screenshot and look at it with a measuring tool. From there I was going to look the firefox debugger and ie debugger to see what is off by 1px.
However I was hoping someone might have an idea to what is causing this.
Here is the offending element in ie ( 28 px )
Here is where it is correctly displayed in FF, Chrome, etc. ( 27 px )
http://www.arcmarks.com
Here is the CSS for the button:
#ue_but_new{
position: absolute;
padding: 8px 6px 7px 6px;
text-decoration: none;
cursor: pointer;
}
p.small_white{
font-size: 10px;
color: #ffffff;
}
.blue_but{
color: #ffffff;
border: 1px solid #057ed0;
background: -moz-linear-gradient(top, #31baed, #019ad2);
}
If you base element size on text size, it will always vary between different browsers, different systems, different settings, et.c.
Set a specific line height on the element instead of padding from the text height:
#ue_but_new{
position: absolute;
line-height: 25px;
padding: 0 6px;
text-decoration: none;
cursor: pointer;
}
You could try to apply border on the input & button wrapper, then set overflow:hidden.
This way, even if it's off by a pixel, it's not visible.
In HTML:
<div>
<input type="" />
<button></button>
</div>
In CSS (roughly):
div {
border:1px solid #ccc;
border-radius:3px;
background:#fff;
overflow:hidden;
}
input {
border:0;
background:transparent;
}
button {
background:blue;
}
div, input, button { height:22px; }
Prefer setting the line-height property to vertically center a single line of text rather than using padding-bottom and padding-top.
In your case font-size: 10px + padding-top: 8px + padding-bottom: 7px = line-height: 25px.
#ue_but_new {
position: absolute;
padding: 0 6px;
line-height: 25px;
text-decoration: none;
cursor: pointer;
}
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 have this issue with <input type="text">where I see some extra border in top and left of the input box.
I have this CSS code -
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: auto;
border-radius: 10px;
}
I am attaching the screenshot from chrome. Firefox shows the same thing.
Try
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: none; /* <-- This thing here */
border:solid 1px #ccc;
border-radius: 10px;
}
By setting it to border:none the default css of the text field will be gone and your ready to style it for yourself.
Demo
#add {
width: 60%;
height: 25px;
margin: 0 auto;
border: 1px solid black;
border-radius: 10px;
}
Border auto is doing that for you. So have your own defined border style.
I noticed in Chrome that the user agent style that causes this specific look is border-style: inset; You can see it in the snippet below. Chrome is handy about indicating the user agent styles. I found two ways to fix this appearance.
Simply set border: 1px solid black; and you notice that the border will lose that inset look.
If you want extra caution, you can set border-style: none; This will cause the border to disappear altogether. You can then set the border as you wish.
I would test any of these solutions across different browsers.
Chrome User Agent Stylesheet:
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset; /* This rule adds the inset border */
border-color: initial;
border-image: initial;
}
By setting the border: none; will override/nullify the default input css of the text field and then you can add your own custom css to beautify the input text element like so:
border: none; /*removes the default css*/
border: 1px solid black; /*your custom css*/
border-radius: 10px; /*your-border radius*/
However the above method is unnecessarily tedious whereas you could achieve the same result in just a single line with:
border-radius: 10px !important; /*this simply does the trick!!!*/
**Note:** The !important property in CSS is used to provide more weight (importance)
than normal property. It means that “this is important”, ignore all the subsequent
rules
<input type="text" style="border-radius: 25px;" /> 100% works
Try this thing