How do I change the size of this box? As you can see it is way too big for the given table.
I've tried with padding, borders, width ... etc. Nothing seems to work :/
This is the box
<input type='color'>
Combining border, background, and padding properties will get rid of the 'added space'.
The main one that gets rid of the colour is background.
input {
border:0;
background:none;
padding:0;
}
<input type='color'>
Updated:
I have found -webkit-color-swatch-wrapper and -webkit-color-swatch
input{
margin:0;
padding:0;
border:0;
}
input::-webkit-color-swatch-wrapper {
padding: 0;
margin:0;
background:none;
}
input::-webkit-color-swatch {
border: none;
}
<input type='color'>
You could give your input an ID, and change width and height with css like this.
<input type='color' id="myColor">
and the css like this,
#myColor {
width: 100px;
height: 20px; }
Related
I made the input box bigger (like 500 by 500 pixels), but the text would start from the middle, not the top. I tried putting the padding to zero but it doesn't seem to work. This is under the form tag.
Here's my html code:
<form>
<input class="postbox" value="Hello."><br>
</form>
and this is my css code:
.postbox{
padding:0;
height:500;
width:500;}
you stretched the input-line to 500px, not the form.
As Alvaro Menéndez noticed, you might want to use a textarea, not an input.
Use something like
<form>
<textarea class="postbox" placeholder="Hello"></textarea><br>
</form>
<style>
.postbox {
padding:0;
height:500px;
width:500px;
}
</style>
http://pascha.org/test/2.php
Something like this might do it, i have removed the height and padded the input out
.postbox{
padding-bottom:450px;
width:500px;
}
You can do that by using the padding-bottom property
HTML
<input type="text" value="test"/>
CSS
input {
padding: 10px 10px 100px;
width: 300px;
border: 1px solid red;
}
JSFiddle: http://jsfiddle.net/LeoAref/ko9ahz0L/
My problem is the following:
I have a contact form with multiple input fields. The input fields are on a normal page round about half of the div that they are in. Now when observing my webpage through an browser the problem occurs. The page itself can get smaller than the input fields.
What I would like is the following:
That it resizes to fit in the div instead of overlapping/overflowing outside of the div.
I've tried searching it here on SOF and on google but either I'm searching for the wrong thing or I just can't find it.
HTML:
<div id="contact-formulier">
<form method="post" action="contact.php">
<label>Naam*</label>
<input name="naam" placeholder="Graham Neal" required>
</form>
</div>
CSS:
input, textarea {
width:439px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
textarea {
height:213px;
}
input:focus, textarea:focus {
border:1px solid #97d6eb;
}
Set the form width to 100% then the input and textarea width to around 90%. I hope this is the result you are seeking for. Just like that:
form {
width: 100%;
float: left;
}
/* Style the text boxes */
input, textarea {
width:90%;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
...
}
With the width fixed as you put in the css, it's not going to happen.
You could use percentage to obtain this but they don't work perfectly every time in my experience, especially if you do something a little more complex than the simple exercise of your fiddle or if you embed the example into something else.
Best way is using jquery to force the width:
$(document).ready(function() {
$(window).resize(function() {
$('input').width( $('#contact-formulier').width() - 22);
});
});
See: http://jsfiddle.net/Lnnxsrwj/2/
I am not sure where you edit the code for my question so I put both (sorry if that confuses anyone)
In the top right hand corner there are two text boxes, but I'm not sure how to make them bigger in height. Please could you help me?
Here is the link to my site so far: http://jsfiddle.net/xiiJaMiiE/4UUgg/1/embedded/result/
#signin
{
position:absolute;
min-width:22%;
height 20%;
top:0%;
right:0%;
z-index:10;
background-color:#CCC;
border: 1px solid grey;
}
#signin input {
background-color:#FFF
}
Sorry to be a pain, but also how do I add text into it? but when the user clicks in the box is disappears?
Thanks for your help!
According to this answer, here is what it says:
In Javascript, you can manipulate DOM CSS properties, for example:
document.getElementById('textboxid').style.height="200px";
document.getElementById('textboxid').style.fontSize="14pt";
If you simply want to specify the height and font size, use CSS or style attributes, e.g.
//in your CSS file or <style> tag
#textboxid
{
height:200px;
font-size:14pt;
}
<!--in your HTML-->
<input id="textboxid" ...>
Or
<input style="height:200px;font-size:14pt;" .....>
If you want to make them a lot bigger, like for multiple lines of input, you may want to use a textarea tag instead of the input tag. This allows you to put in number of rows and columns you want on your textarea without messing with css (e.g. <textarea rows="2" cols="25"></textarea>).
Text areas are resizable by default. If you want to disable that, just use the resize css rule:
#signin textarea {
resize: none;
}
A simple solution to your question about default text that disappears when the user clicks is to use the placeholder attribute. This will work for <input> tags as well.
<textarea rows="2" cols="25" placeholder="This is the default text"></textarea>
This text will disappear when the user enters information rather than when they click, but that is common functionality for this kind of thing.
This will do it:
#signin input {
background-color:#FFF;
min-height:200px;
}
Try this:
#signin input {
background-color:#FFF;
height: 1.5em;
/* or */
line-height: 1.5em;
}
there are many options that would change the height of an input box. padding, font-size, height would all do this. different combinations of these produce taller input boxes with different styles. I suggest just changing the font-size (and font-family for looks) and add some padding to make it even taller and also more appealing. I will give you an example of all three style though:
#signin input {
font-size:20px;
}
OR
#signin input {
padding:10px;
}
OR
#signin input {
height:24px;
}
This is the combination of the three that I recommend:
#signin input {
font-size:20px;font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
padding:10px;
}
.textbox {
height: 40px;
}
<div id=signin>
<input type="text" class="textbox" size="25%" height="50"/></br>
<input type="text" class="textbox" size="25%" height="50"/>
Make the font size larger and add height (or line height to the input boxes)
I would not recommend adding those size and height attributes in the HTML as that can be handled by CSS. I have made a class text-box that can be used for multiple input boxes
Using the following css
.prenom { width: 200px; background-image: url('/Images/Prénom.jpg') ;background-repeat: no-repeat;display: block;background-position: left top;}
I get this
I want this
where the background image would be on top and OUTSIDE of the textbox
Do I need to create a different object for my image or can i set a css property to have a padding on top for the textbox
Thanks
I would suggest to attach it to different object in your HTML. The advantage is that you probably get less problems to make a consistent experience across browsers.
Try this,
.prenom { width: 200px;
display: block;
position:relative
}
.prenom:after{
content:url('/Images/Prénom.jpg');
display:block;
position:relative;
top: -30px;
left:0;
}
-30px can be change to adjust the image
You can try
.prenom {
width: 200px;
display: block;
background:url('/Images/Prénom.jpg') 0 -10px no-repeat;
}
The value -10px can be modified to suit your requirement.
You looking for something like this?
HTML
<div>
<form>
<label for="text1">Random Text</label>
<input type="text" name="text1" />
</form>
</div>
CSS
label{
display:block;
}
http://jsfiddle.net/Xero1212/u56qF/5/
I have a website design that includes text input fields that look like this:
Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png
I'm wondering what the best solution for creating this input field is.
One idea I have is to always have a div around the input with a background image and all the borders disabled on the input field and specified width in pixels, such as:
<div class="borderedInput"><input type="text" /></div>
I have tried to discourage them from using this format, but they won't be discouraged, so it looks like I'm going to have to do it.
Is this best or is there another way?
--
Trial:
I tried the following:
<style type="text/css">
input.custom {
background-color: #fff;
background:url(/images/input-bkg-w173.gif) no-repeat;
width:173px;
height:28px;
padding:8px 5px 4px 5px;
border:none;
font-size:10px;
}
</style>
<input type="text" class="custom" size="12" />
but in IE (6 & 7) it does the following when you type more than the width:
Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png
I'd do it this way:
<style type="text/css">
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
div.custom input {
background-color: #fff;
border:none;
font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>
You just have to adjust the padding values so everything fits correctly.
It is - in my eyes- definitely the best solution since in any other case you're working with a whole input field. And the whole input field is - by definition - a box where users can enter text.
If you can rely on JavaScript you could wrap such div-Elements around your input fields programatically.
Edit:
With jQuery you could do it this way:
$( 'input.custom' ).wrap( '<div class="custom"></div>' );
CSS:
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
input.custom {
background-color: #fff;
border:none;
font-size:10px;
}
And your HTML:
<input class="custom" ... />
You don't need the div element, you can assign a background to the input directly.
Edit: Here is the working code. I tested it, but you'll have to adjust it for your needs. As far as I can tell, everything here is needed.
input {
background: #FFF url(test.png) no-repeat bottom right;
width: 120px;
height: 20px;
line-height:20px;
padding:0;
text-indent:3px;
margin:0;
border: none;
overflow:hidden;
}
Edit2: I'm not quite sure why I'm getting downvoted, but this method should work unless you need an image bigger than the input element itself. In that case, you should use the extra div element. However, if the image is the same size as the input, there is no need for the extra markup.
Edit3: Ok, after bobince pointed out a problem, I'm getting a little closer. This will be work in IE6&7 and it's close in FF, but I'm still working on that part.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
Edit4: Ok, I think I got it this time, but it requires use of a CSS3 selector, so it won't validate as CSS 2.1.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
body>input:enabled {
background-position:9px 10px;
}
body>input will target everything except for IE6, body>input:enabled will target any form elements that aren't disabled for all browsers except for IE 6, 7, & 8. However, because :enabled is a CSS3 selector, it doesn't validate as CSS2.1. I wasn't able to find an appropriate CSS2 selector that would allow me to separate IE7 from the other browsers. If not validating (yet, until the validator switches to CSS3) is a problem for you, then I think your only option is the extra div element.
Have you evaluated using background image like this:
<style type="text/css">
input{
background-color: #AAAAAA;
background-image: url('http://mysite.com/input.gif');
border: 0px;
font-family: verdana;
font-size: 10px;
color: #0000FF;
}
I have done this a few times. I have the background image inside a div and use css to position the input field accordingly.
Have a peek at the following site I created that used this technique and use the code: http://www.ukoffer.com/ (Right hand side Newsletter)
AFAIK, the background scrolling problem can be solved either in Firefox and friends, OR Internet Exploder; but not make everyone happy at once.
I would normally have said to style the input directly, but now that I think of it that div example doesn't sound too bad and should take care of your background image scrolling problem.
In that case you'd set a div as position:relative, and put the input inside it with proper padding and width (or 100% width if padding is 0), background transparent, and put an image on the div.
okoman has gotten the CSS aspect correct. May I suggest using a <label> to improve the semantic structure of the markup?
<label id="for-field-name" for="field-name">
<span class="label-title">Field Name <em class="required">*</em></span>
<input id="field-name" name="field-name" type="text" class="text-input" />
</label>
<style type="text/css">
label, span.label-title { display: block; }
</style>
Not only is this more accessible, but it provides numerous hooks that you can use for any type of DOM manipulation, validation or field-specific styling in the future.
Edit: If you don't want the label title displayed for some reason, you can give it a class of 'accessibility' and set the class to display: none; in the CSS. This will allow screen readers to understand the input but hide it from regular users.
The easiest way to get rid of the overflow without JavaScript is simple:
Create a 3 spans, and set their heights to the height of the
image.
Cut the image into 3 parts, ensuring you cut the image such that
the left and right round parts will be on the 1st and 3rd images
respectively.
Set the background of the 1st span to the image
with the left border, and set it to no-repeat.
Set the background
of the third span to the image with the right border and set it to
no-repeat.
Put the input inside the middle span, remembering to
set its height to the height of the spans, and its background to the
2nd image, and repeat-x only.
That will ensure that the input
will seem to expand horizontally once the input is being filled. No
overlapping, and no JS needed.
HTML
Assuming the image height is 60px, the width of the first and third span is 30px,
<span id="first">nbsp;</span><br />
<span id="second"><input type="text" /></span><br />
<span id="third">nbsp;</span>
CSS
span#first{background:url('firstimage') no-repeat; height:60px; width:30px;}
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;}
span#second input{background:url('second image') repeat-x; height:60px;}
That should resolve your issue.