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>
Related
I have the following problem: I have to use an HTML->PDF conversion service to render a piece of HTML. However, this service is a bit limited in it's functionality, so I need a way to "work around" it.
I'm mainly just printing text, so it's not a big deal, but the only problem is that I have to print some "unticked" and some "ticked" check boxes, my converter is failing at this. In particular I've tried:
Using the unicode ☐ ("☐") and ☑ ("☑") characters, but the converter doesn't render them (probably the font it's using doesn't
have them)
Using the WingDing characters þ and ¨ but again, the wingding font is not recognized
The converter doesn't support images, so can't just use an image
I was thinking, at this point, to "simulate" a checkbox by using spans with borders, something like:
<span style="border: 1px solid black; height: 12px; width: 12px;"></span>
However, I can't make it look correct (no fault of the converter this time, even browsers show the above as just one vertival line.
Can anyone help me "draw" checkboxes using just "basic" html elements? What would be the cleanest way?
PS: checkboxes need to be inline with the text.
You're on the right track.
Using HTML and CSS:
/* The standalone checkbox square*/
.checkbox {
width:20px;
height:20px;
border: 1px solid #000;
display: inline-block;
}
/* This is what simulates a checkmark icon */
.checkbox.checked:after {
content: '';
display: block;
width: 4px;
height: 7px;
/* "Center" the checkmark */
position:relative;
top:4px;
left:7px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<div class="checkbox"></div> Unchecked<br><br>
<div class="checkbox checked"></div> Checked
The reason YOUR code didn't work was because you were using a span element, which is an inline element. You can use a span for this, but you'll need to add the style of display: block to the element (making it act as a block element instead of an inline element).
The div tag is a block, so no need for setting it's display style. If you would like the div to display inline, set the display: inline-block
Try this :
<div style="border: 1px solid black;
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;">
</div>
https://jsfiddle.net/8rt4dqfc/
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 have a simple HTML page with background image, and now I'm applying a contact form on this HTML page.
I want to show the background image in the text input field i.e, I want to make input text field transparent. I have use CSS code background-color:transparent;, but it doesn't work. I am getting a white background for input text field.
try this
.contact
{
background: url(https://www.gravatar.com/avatar/ba03773d5fe4b970a7d7fb57a112e932?s=32&d=identicon&r=PG) no-repeat right center;
height:100px;
width:200px;
padding:10px;
}
.contact input[type="text"]
{
background:rgba(0,0,0,0);
border:1px solid #fff;
color:#fff;
}
http://jsfiddle.net/2ZmFA/
This is working on Fiddle:
input[type="text"]
{
background: transparent;
}
and withour border if you want by border: none;
Here is the Fiddle
So your problem must be at another place in code. Add more code and i will update my answer ;)
<input type="text" class="textInput"/>
CSS :
.textInput {
background: transparent;
background-image: url(Images/textBg.jpg)
}
You could set the background color to transparent.
background-color: rbga(0,0,0,0);
alternatively in css3 you may set the opacity of the whole element:
opacity: 0;
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/
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.