I wanna show a picture inside the default value of a text field. this is what I've tried but it doesn't work.
<input type="text" value="<img src="../images/left_arrow.gif" />Word" />
I've tried escaping the " but that doesn't work
you need to put the image as the background of the element..
html
<input type="text" class="with-default" value="Word" />
css
input.with-default{
background: url('../images/left_arrow.gif') 0 0 no-repeat;
}
Alternatively, if you are flexible about the actual arrow appearance, you could use a unicode char to display the arrow i.e. ⇐
for more unicode arrows: http://www.alanwood.net/unicode/arrows.html
demo: http://jsfiddle.net/6GyVM/
Why do you want a picture inside a text field? If it's just a decoration, use CSS background image.
this is for asp.net
http://www.bitrepository.com/how-to-add-a-stylish-icon-into-a-form-text-box.html
Related
I have an input box that I want to be tight to the value string within. As such, I have the input field resized on each input event, e.g.:
<input value=1 size=1 oninput='this.size=this.value.length'>
This works with the exception that both Chrome and Firefox (shown below respectively) leave additional padding on the right within the input field. Firefox being the worst.
How can I, thru CSS or inline attribute, get rid of the extra padding on the right WHILE maintaining the auto-expanding expanding feature (vis a vis this.size = this.value.length)?
UPDATE: While suggestion below fake-fix the problem, none are proper fixes. It seems, in this regards, <input> box is unredeemable. As such, I'm just moving on to using <div contenteditable=true></div>. The outline hugs the textContent tightly. Fortunately, for my use, compatibility with <form> or autocomplete features are not necessary.
It's not padding on the right side. Your text in the input is just aligned to the left. If you want to have it in the center of your input you can use text-align: center;.
input {
text-align: center;
}
<input value=1 size=1 oninput='this.size=this.value.length'>
Try this. It works fine after inputting 3 characters.
HTML:
<input style="text-align:center" type="text" value="1" size="1">
JS:
function resize(e){
len = e.target.value.length;
if(len > 3){
e.target.size = len-3;
}
else {
e.target.size = len;
}
}
document.querySelector("input").addEventListener("input",resize)
playing with width, the output seems to be very close to what you expected. See snippet below. The answer is not 100% accurate but close. Kindly adjust the code to suit your requirement.
Note:
you need a extra span element to get the exact width without extra
padding - this is because, when assigning a fixed width to calculate the width of the input box, slim values like 1 occupies less width and.
ensure the extra span element and the target input box have
some font size.
Plan to set a minimum width for the textbox when
it's empty or slim values like 1.
Hope this helps.
<html>
<style>* {
font-family: calibri;
font-size: 11px;
}</style>
<body>
<span id="d1"></span>
<input type=text value="1" style="width: 12px;" size="1" onkeyup="d1.innerText=this.value;this.style.width = d1.offsetWidth;" id="t" />
</body>
</html>
I'm writing a "Natural Language" form like this one and therefore I include the <input> tags right inside the text like this:
<h3>I am <input type="number" /> years old.</h3
I'd like to know if there is an easy way to set the font-size of this input to be the same as the text (in this case h3)? That way I could include it inside h1's, h2's, etc. without worrying about font-size.
The main reason being that I use Bootstrap for my typography, and it does a lot of magic which I'd want to automagically apply to my input.
You can use font-size:inherit; to make the font size match it's parent.
HTML
<h3>I am <input class="inherit" type="number" /> years old.</h3>
CSS
.inherit {
font-size: inherit;
}
Here is a fiddle of it in action: https://jsfiddle.net/uyxr7zm0/
I have two texts with different lengths and I'd like to display only one of them (in this case 'come') but preserving as much space as the length of the longer one ('will come') so that I can switch them without changing the sentence width.
Is it possible only with css?
I promise I come to see you in the hospital.
I promise I will come to see you in the hospital.
Yes, it is possible with pure CSS.
You will want to wrap both potential options each in <span> element, and then both of those should in turn be wrapped in another <span>.
You can set each of the child span elements to be display: block; so that they sit on top of each other, and then you can show and hide one or the other by setting height: 0; and overflow: hidden;. This completely hides that one element, but allows it's width to still contribute to the size of the parent.. thus, the parent will be as large as the longest of the two options.
Then, the outer <span> just needs to be display: inline-block; and vertical-align: bottom; to stay in line with the text.
Add some extra styles for prettiness and to do the toggle on hover and you should have something like this:
jsFiddle DEMO
I made this in a few mins you can work off it and improve the basic functionality but here is the gist of what i did.
By using span and visibility:hidden rather than display:none it keeps its space even when its not actually visible.
Giving each button, text input and phrase an id that can use a key to identify it you'll be able to have multiple buttons, phrases and text boxes without needing to name every button, text box and phrase within your jquery.
here is the basic html
<p>A random phrase <span id="word1">to</span> test with</p>
<input type="text" id="txt1"/>
<input type="button" id="btn1" key="1" value="test word"/>
<hr>
<p>Another random phrase <span id="word2">that</span> can be tested</p>
<input type="text" id="txt2"/>
<input type="button" id="btn2" key="2" value="test word"/>
<hr>
<p>Some random text <span id="word3">just</span> to create some test</p>
<input type="text" id="txt3"/>
<input type="button" id="btn3" key="3" value="test word"/>
<hr>
basic jquery
$(document).ready(function(){
$("input[type=button]").on("click", function(){
var which = $(this).attr("key");
var correctWord = $("#word" + which).text();
var userWord = $("#txt" + which).val();
if(correctWord == userWord){
$("#word" + which).html(userWord).css({"visibility" : "visible", "color" : "#00cd00"});
$("#txt" + which).css({"border" : "1px solid #00cd00", "outline" : "none"});
}else{
$("#txt" + which).css({"border" : "1px solid #ff0000", "outline" : "none"});
}
});
});
and the small bit of css
p span{
visibility:hidden;
color:black;
}
You will of course be able to see the correct spelling of the word within the source code but im assuming that wont be an issue with the way you asked the question.
here is a jsfiddle showing it in action
Hope this gets you thinking on a way to carry on with your idea.
EDIT here is an updated JSFIDDLE which is more inline with what your thinking of i think.
You can grab the source code from there and play around with it.
Once again hope this helps.
Hi i would like to know how to change the text box in HTML to just a line rather than a box because i am trying to make a webpage look like a PDF form and for a neat outlook i would like to change the text box design to just a long line so the user can type his name or whatever the field requires him to do..
You'll probably want a more specific selector, but this should make a reasonable starting point:
input {
border-style: none;
border-bottom: solid black 1px;
}
You mean to display a <textarea> as an <input type="text">?
In html, i assume, via <textarea cols="" rows="1"> or via CSS styling the width and height of the element
For single lines of input, I'd use a <input type="text" />, which actually is the default type and can be abbreviated to just <input /> (I'm assuming xhtml in these examples).
i am new in html and php so i want your help,
I want to add an image behind some objects (2 textbox, one link, one submit button) on html. How can i do that? take example the facebook the blue bar where over it is the login items..
Thanks
Take a look at the background-image clause in CSS
Examples here
http://www.tizag.com/htmlT/htmlbackground.php
Just add a "div" and insert what you want inside him.
Then set it a width and a height to fit your background image.
You just have to specify an image as background for the element which contains your objects. I guess this will be a div. All about background-images can be found via google or here:
http://www.w3schools.com/css/pr_background-image.asp
You can use CSS to set the background color, or as other people have mentioned, a background image.
Assuming your elements are contained in a <div id="my-background"> element, the following style will apply a blue background to the div:
#my-background { background-color:#0000FF }
You may want to read up on CSS.
<table background="image.png" width=100%>
<tr>
<td>
<font color="white">Email</font><br>
<input type="text" name = "email" size="25"><br>
</td>
<td>
<font color="white">Password</font><br>
<input type="password" name = "password" size="25">
<input type = "Submit" value = "Log in" height='5'><br>
</td>
</tr>
</table>
but the texbox is not looks nice... there is huge space between one...