Wondering if this is possible:
Let's say if I have a text input element that I want to use to input currencies. Probably I'd want a prefix before the text input to indicate what currency the user is performing his input in.
Hence, the HTML'd look something like:
US$ <input type="text" />
But let's say I want the "US$" above to appear as a prefix inside the text input itself, without the "US$" being part of the input string. Something like where "US$" is the background text of the text input. Of course, the text input would be indented to avoid clashing with the background text.
Any way of accomplishing this without the use of images or Javascript?
Thanks!
I didn't have time to try my solution in IE (leaving work now) but you can play around with this if you want: http://pastie.org/581472
Update: Took a quick look in IE6-8 and it didn't work in any of them. Not sure if it's cause of the minimal HTML5 document or something else, I'll take another look at it later today or tomorrow.
Update 2: Updated the code to work with FF 3.5, Opera 9, Safari 4, IE6-8 (and probably more and earlier versions, but that is not tested). Grab the updated code.
<!doctype html>
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { background: transparent; position: relative; text-indent: 28px; z-index: 2; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; z-index: 1; }
</style>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
Updated code:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { padding-left: 28px; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; }
</style>
</head>
<body>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
</body>
</html>
If you really wanted to, you could do the following:
1.) Start with a field being defined as follows:
<div class="moneyFieldHolder">
<input type="text" class="moneyField" />
</div>
2.) Create a background image of a textbox with US$ inside it:
----------------
|US$ |
----------------
3.) set up the CSS:
.moneyFieldHolder {
background: url(image.png) top left;
}
.moneyField {
border: 0px solid #FFFFFF;
margin-left: 4em;
}
And that's it...this is definitely a hacky solution and should only really be used if absolutely necessary. Also, this does -- of course -- require an image.
i would think you could do this with an absolutely positioned div that has a transparent bg. alternatively, you might have some success intercepting every keystroke and updating what is displayed yourself.
Related
I have a standard "Contact Form 7" Send File as Attachment Form on wordpress:
<label>UPLOAD FILE
[file uploadedfile]
</label>
I am already searched stackoverflow etc etc etc.
After 2hrs I gave up :(
How can I change the Color of the background and the font size easily?
If I get in touch with the file form control directly it will blast up like a giant. This is not useful for computers and never responsiv für mobile.
And as a second question.
Is it possible to format the "No file selected" differently from the "Search computer (Durchsuchen)"?
Although it's difficult to style a file input itself due to browser compatibility, you can instead apply styling to its label to achieve the same result.
Take a look at this example input:
<label for="fileInput">
Upload file
</label>
<input id="fileInput" type="file">
Because the label is directly linked to the input, it will open the file browser once you click on either the label or the input. Since that's the case, you can hide the input itself and only display the label.
<style>
input[type="file"] {
display: none;
}
</style>
Now that you're left with only the label, you can apply styling to the element to make it look more like a button instead of a label. Take a look at this basic example of CSS you could use to style the label.
<style>
label[for="fileInput"] {
border: 1px solid black;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>
Here's what you'll end up with after hiding the input and add styling to the label. Of course, this is just a basic example, but there are almost no limits to what you can achieve through CSS, so you could style the label any way you'd like.
Putting it all together, the final code for this implementation will look something like the following:
input[type="file"] {
display: none;
}
label[for="fileInput"] {
border: 1px solid black;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<!doctype html>
<html>
<head>
<title>File upload styling</title>
</head>
<body>
<form method="post">
<label for="fileInput">
Upload file
</label>
<input id="fileInput" type="file">
</form>
</body>
</html>
Since you're using WordPress, you'll just end up putting the CSS in your theme styles, but the implementation should be almost identical as to what it would be with a static HTML site.
If we use input date tag, it will show this format.
I just want to hide "dd" in the date input. So I did this way. And its gone.
input::-webkit-datetime-edit-day-field{
display: none;
}
The problem
It's showing extra dash "/" symbol there. I just want to remove that as well.
I used css first child like this and try to target first child but it's not working.
input::-webkit-datetime-edit-fields-wrapper ::-webkit-datetime-edit-text:first-child {
display: none;
}
Any ideas for hiding this? https://jsfiddle.net/mdoty2g9/
Finlay I found a fix my self. I hide the "/" completely.
input::-webkit-datetime-edit-text{
display: none;
}
Then used persudo css this way placing inside the input.
input{
position: relative;
}
input:after {
content: "/";
position: absolute;
left: 60px;
top: 1px;
}
Problem solved!
<!DOCTYPE html>
<html>
<body>
<h1>Show a Date Control</h1>
<form action="/action_page.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit">
</form>
<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 (or earlier).</p>
</body>
</html>
so Iv'e made an input that it's height is "300px" what means that its pretty big, and when I type a text the input it's starts from the middle of the input and not from the left top. How do I do it?
text-align: left;
height: 300px;
You could use padding instead of height.
Something along the lines of this would suffice:
input{
padding-bottom: 280px; /* change this depending on your requirements */
}
Although I don't recommended this. It's very tacky and un-user friendly. As the comments suggested, you should have a look into HTML's native textarea element.
This may not be what you were looking for but consider it.
var textarea = document.getElementById("demo");
function getValue() {
alert(textarea.value); // Works just like a text input!!!
}
#demo {
height: 300px;
resize: horizontal;
/* Considering you have defined a height */
}
<!DOCTYPE html>
<html>
<head>
<!--
<link rel="stylesheet" href="path/to-your/css-file.css">
-->
</head>
<body>
<textarea id="demo">And yes you can get the value of a textarea just like a text input!</textarea>
<button onclick="getValue()">Get Value</button>
</body>
</html>
I use HTML5
<input type="search" />
As soon as one starts typing, the clear button ('x') appears. So far that's what I want. But when the focus is no longer on the input field (although there are still characters inside), the clear button gets hidden.
How can I prevent that behavior?
I want to save the user that extra step of having to focus back on the search input to clear it. So the 'x' should be visible as long as there are more than 0 characters in the search input, no matter where the focus is.
<div class="input-container">
<input class="search" type="search" />
<span class="clearinput">x</span>
<div style="clear:both;"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".search").on("focusin",function(e) {
$('.clearinput').css('opacity','1');
});
$(".search").on("focusout",function(e) {
$('.clearinput').css('opacity','0');
});
$(document).on('click','.clearinput',function(e){
$('.search').val('');
});
</script>
<style>
.input-container{max-width: 250px;position: relative;}
.search{ width: 100%;
z-index:-1;position: absolute;
padding-right: 60px;}
.clearinput{
position: absolute;z-index:6;
float: right;
cursor: pointer;
right: 10px;
height: 25px;border:1px solid red;width:25px;font-size:32px;
background-color:red;
/* display:none; */
top: 0;}
</style>
you can not hide on focus in and out because when we clear the or click the cross button it run focus out then not able to clear the search fields . make styling according to your sorry for bad styling
I'm looking for a way to style the asterisk in the placeholder.
Plain text like this in placeholder does not satisfy me:
Your e-mail*
Note that the placeholder text is variable, so static background will not play the trick
:after works but you need to target the placeholder and not the input element...and then you can use position: absolute; and top, left properties to move your * anywhere you want to...
Demo (Am not sure about other syntax but I've tested on webkit as am using firefox < 17 so if something is failing in any browser please let me know)
HTML
<input type="text" placeholder="E-Mail" />
CSS
::-webkit-input-placeholder:after {
content: '*';
}
:-moz-placeholder:after { /* Firefox 18- */
content: '*';
}
::-moz-placeholder:after { /* Firefox 19+ */
content: '*';
}
:-ms-input-placeholder:after {
content: '*';
}
This should do the trick. You can go here to find any HTML Entity to add to your placeholder. Make sure your head has a meta tag which uses charset UTF-8.
<head>
<meta charset="utf-8">
</head>
<input type="text" id="email" class="form-control input-lg formData" placeholder="Your Email*"/>
Better way is to keep the asterix in the placeholder as a fallback because this works in Webkit browsers only. So for other browsers your users don't know what field is mandatory.
Then you facing another problem - two asterixes in the placeholder. This can be fixed really easily by javascript.
I wrote an article about this: http://d.pr/1zQu
The simplest way i found was to give the input field a background image:
<!DOCTYPE html>
<html>
<head>
<style>
input.mandatory {
padding: 2px;
height: 30px;
width: 200px;
background-image: url("http://www.fileformat.info/info/unicode/char/002a/asterisk.png");
background-position: 160px -10px;
background-repeat: no-repeat;
background-size: 30%;
}
</style>
</head>
<body>
<input class='mandatory' type='text' placeholder='Username'>
</body>
</html>
https://jsfiddle.net/t7jnyqos/18/