I have an input field 400px width. When I hover it, width will increase on 500px, when I focus it, width will stay increased on 500px. Than I write down some text, click away and input field come back to 400px width. I want to stay input field on width 500px after writing down some text into the field and click away, or press TAB.
I have it like this:
input { background-color:#fff; width:400px; ....... }
input:hover { opacity:0.9; filter:alpha(opacity=90); width:500px;}
input:focus { color:#ff6b4f; box-shadow: 0 0 8px #fff; width:500px;}
input:visited { color:#ff6b4f; box-shadow: 0 0 8px #fff; width:500px;}
This does not work. I do not know how can I do that correctly.
In your case you should use javascript. You can handle blur event of your input and check if it's empty or not. If it's not add some additional class which change width to 500px;
You can see working (jQuery) example here
Also :visited pseudo-class works only for links.
The :visited attribute only applies to links, so you'll have to use Javascript instead:
CSS:
input {
width:200px;
border:1px solid #ccc;
background-color:#eee;
padding:0.25em 0.5em;
}
input:hover, input:focus, input.visited {
width:300px;
}
HTML:
<form>
<input name="x" onchange="this.className=(this.value=='')?'':'visited';" />
</form>
JSFiddle: http://jsfiddle.net/e77CG/
Related
I have a button on a form;
<button type="button" class="button" onclick="validate_form_newsletter_wide( form )"><img src="index_htm_files/btn_newsletter_wide.png" alt="Send"></button>
It styled using;
<style>
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
#form_newsletter_wide .button {
position:relative;
float: right;
cursor:pointer;
border: 0px;
padding: 0px;
margin: 0px;
margin-top: -1px;
z-index:100;
}
</style>
When clicked in Firefox nothing about the button changes, in Chrome I get a highlight border around the button which I can live with but in IE it's more of a pressed effect where the button almost seems to move down and right. Is there anyway to prevent this?
It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
<img src="myimg"/>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
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've looked around a bit but can only find JS solutions to this.
Is there a way with CSS to detect if an input has any text entered?
What I'm doing is basically this (cut out the irrelevant code for this question):
.search-form input[type="text"] {
width: 0 !important;
}
.search-form input[type="text"]:focus {
width: 100% !important;
}
Essentially, clicking on the label expands the input to 100% of the page width. This works fine, but when you enter text and click off the input, it shrinks back to width:0 - therefore hiding the inputted text. Is there a way with CSS to prevent this behaviour and keep it at width:100% like when the input is :focus when there's text inputted?
Try adding the "required" property to the text field in the HTML, and then add this to the CSS:
.search-form input[type="text"]:valid {
width: 100% !important;
}
I would probably try to avoid all those !importants though.
Not sure if it will work for your specific use case, but you could achieve the effect with a fake input, using contenteditable
Working Example
.fakeInput {
border: 1px solid red;
display:inline;
padding:2px; /* optional */
}
.fakeInput:focus {
display:block;
border: 2px solid blue;
width:100%;
height:1em;
}
<div class="search-form">
<div class="fakeInput" contenteditable="true"></div>
</div>
I notice that if you give an input element a background-color the appearance of the box changes to include an inset effect.
CSS:
input#input1 {
}
input#input2 {
background-color:white;
}
HTML:
<input id="input1" value ="1">
<input id="input2" value ="2">
Is there a way to color the background of an input box without getting this inset effect?
Reference URL : http://jsfiddle.net/aBus6/1/
Thanks
Adding your own border to it will fix that:
border-color:grey;
border-width:1px;
padding:2px;
You'll need to overide the default css that the browser is adding eg
input#input2 {
background-color:white;
border:none;
box-shadow: 0;
}
If you inspect the element you should be able to see all styling being added by the browser.
I have a login form that is styled to have the textboxes and the submit button stretch to 100% of the container size. This is for a fluid mobile layout, but my jsbin example below has a fixed container size for demonstration purposes.
http://jsbin.com/ozutoq/9
In IE7, IE8, FF 4, Safari - all render the submit button a bit shorter than the textboxes. Firebug's layout tool shows the textboxes at 500px wide, but the submit button at 498px wide. In my real example the submit button is 6px skinnier. How can I fix this so it takes up the full width?
Update
I did another test by setting a fixed width on the inputs. It seems that the submit button doesn't follow the box model. I used a 100px width, and it showed 98px + 2px for borders, while the textboxes showed 100px width + 2px for borders.
So, I guess the question is how can I deal with this in a fluid layout? -1px right and left padding on the buttons doesn't seem to work, and the design calls for a 1px border on the button! Will I have to resort to js?
For some reason mozilla sets the inputs of type text to -moz-box-sizing:content-box; but the submit button is set to -moz-box-sizing:border-box;
Setting the following will give you the intended rendering in FF.
.login-tb {
border:1px solid red;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin: 0;
padding: 0;
width:100%;
}
Update:
Added Safari and IE8+ support
I believe it's the way the browser is calculating the input[type=submit] dimensions. I tried applying some resets but those didn't seem to work either. I'm on a Macbook Air with Chrome and on your JSBin example, the realtime preview looked fine but the "Render" validated your issue.
I tried jsfiddle.net and it showed the same issue. Here's a workaround if this will fly for your application. Simply remove the border and background from the submit button and style the wrapper div instead, then put a click listener on the div to submit the form:
CSS:
form {
width: 500px;
padding:0;
margin:0;
}
form div, form div input {
height:20px;
margin-bottom:4px;
}
input[type=text] {
width: 100%;
border: 1px solid red;
padding: 0;
margin: 0;
}
#submit input{
background:transparent;
margin:auto;
border:none;
}
#submit{
text-align:center;
background-color:#CCC;
width: 100%;
border: 1px solid red;
padding: 0;
margin: 0;
cursor:pointer;
}
JQUERY:
$('#submit').click(function(){
$('#login').submit();
});
$('#login').submit(function(){
alert('form submitted');
return false;
});
http://jsfiddle.net/pZcx4/
ALTERNATIVE NATIVE JS:
function submit_form()
{
alert('form submitted');
return false;
// when you are ready, do this: document.forms['login'].submit();
}
document.getElementById('submit').addEventListener('click',submit_form,false);
http://jsfiddle.net/pZcx4/3/
It's pretty weird indeed. I think that the 1px border is added to the outside of your text inputs so it is 500px wide.
While on the Submit button the button is calculated on the sides but shows on the inside, so you get 500px - 1px - 1px = 498px wide...
A possible solution that you could do is just create the following CSS:
.login-tb {
border: 1px solid red;
margin: 0;
padding: 0;
width: 500px;
}
#login-tb {
border: 1px solid red;
margin: 0;
padding: 0;
width: 502px;
}
That fixes your issue and it still shows your submit button as 500px wide in Firebug. And as your form is set to 500px width anyway and this doesn't change, there is not much use in implementing a width set in a percentage.
Not sure this will work for your environment. When I played with the jsbin, adjusting the width worked...
.login-tb { width: 99.75%; border: 1px solid red; padding: 0; margin: 0; }
Tested only on Chrome.