I have a placeholder in a page but am having trouble replacing the text with CSS. The input color, size, and font-style changes, but not the content? How can I replace the placeholder content?
input::placeholder {
color: black;
font-style: italic;
content:"This isn't changing";
}
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
As far as I can tell from looking at the docs you can not update the content through css for placeholder
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
You could consider using js to update the placeholder.
document.getElementsByName('job_location')[0].placeholder='new text';
Related
Is it possible capitalize only "Date" in this situation without using js?
placeholder="date (dd/mm/yyyy)"
It does not appear we can use the ::first-letter selector on an input to target the placeholder. However, you could achieve a near result using capitalize. See example below.
input::placeholder {
text-transform: capitalize;
}
<input type="text" placeholder="date (dd/mm/yyyy)" />
However, you could achieve the desired result using some simple JavaScript.
const input = document.querySelector("input")
const placeholder = input.getAttribute("placeholder");
input.setAttribute('placeholder', placeholder[0].toUpperCase() + placeholder.substring(1));
<input type="text" placeholder="date (dd/mm/yyyy)" />
AFAIK, ::placeholder and :placeholder-shown (an alternative I considered at first), are very limited. The best non-JavaScript solution is to convey information by showing the details in markup by using :focus-within on a <small> like a pop-up (see Example 1 in snippet below -- click the input (focus) and then click elsewhere (unfocus)).
Assuming that the <input> resides within a <form>, one line (albiet a long line), of JavaScript can rectify all [placeholder]s. Add a [name] with a shared value to all applicable <input> and <textarea>s in a <form> then use HTMLFormElement and HTMLFormControlsCollection interface to reference them all (see Example 2 in snippet below).
Note: No solution is as simple as just changing one simple letter in a placeholder by editing the HTML itself. If there's a ton of them or they are dynamically added and you can't control the back-end, then Example 2 is the best solution.
[...document.forms.example2.elements.text] // Collect all [name="text"]
.forEach(text => text.placeholder = // Each [name="text"]["placeholder"] is now
text.placeholder.charAt(0).toUpperCase() // "D"
+ // AND
text.placeholder.slice(1)); // "ate dd/mm/yyyy"
/* General CSS */
html {
font: 2ch/1.15 'Segoe UI'
}
input {
display: inline-block;
font: inherit;
margin-bottom: 5px;
}
/* Example 1 */
.example1 input::placeholder {
text-transform: capitalize;
}
small {
opacity: 0;
transition: 0.5s;
color: tomato;
}
.example1:focus-within small {
opacity: 1;
transition: 0.5s;
}
<fieldset>
<legend>Example 1</legend>
<label class='example1'>
<input placeholder='date*'>
<small>*dd/mm/yyyy</small>
</label>
</fieldset>
<form name='example2'>
<fieldset>
<legend>Example 2</legend>
<input name='text' placeholder='date dd/mm/yyyy'>
<input name='text' placeholder='enter first name'>
<textarea name='text' rows='3' cols='48' placeholder='instead of taking the time to capatalize your placeholders properly, use a little JavaScript.'></textarea>
</fieldset>
</form>
I have a form with a textfield and a textarea and both of them have a placeholder. But the font style of the placeholder is different as compared to the textfield and textarea. Please show me how to keep the same font style.
<form>
<input type="text" placeholder="just for testing the style">
<textarea placeholder="just for testing the style"></textarea>
</form>
You need to set them to the same font family in the CSS:
textarea,
input[type=text] {
font-family:Arial;
}
You need to mention font family for textarea like here
css
textarea{font-family:arial;}
Mysterious style attribute insert into input type-password tag after page loaded!?
Page source:
<input type="password" placeholder="password">
Style sheet:
input:-moz-placeholder {
color: #999999;
}
After Load (Firebug):
<input type="password" placeholder="password" style="font-weight: 500; font-style: normal; color: rgb(0, 0, 0);">
Screenshot,
Example, http://jsfiddle.net/LaxkL/
Effect, change the placeholder color, and it happens to type=password only
Affected browser, Firefox 13+ (the first version I used on Mac) on Mac OS X
Question, how can I fix this, so all input placeholders have same color?
I'm viewing this on Firefox 16.0.1 and there doesn't seem to be a problem. It's likely something that was fixed as support for the placeholder attribute grew.
How can I change the font size of text inside the textbox in html.
For a <input type='text'> element:
input { font-size: 18px; }
or for a <textarea>:
textarea { font-size: 18px; }
or for a <select>:
select { font-size: 18px; }
you get the drift.
To actually do it in HTML with inline CSS (not with an external CSS style sheet)
<input type="text" style="font-size: 44pt">
A lot of people would consider putting the style right into the html like this to be poor form. However, I frequently make extreeemly simple web pages for my own use that don't even have a <html> or <body> tag, and such is appropriate there.
Here are some ways to edit the text and the size of the box:
rows="insertNumber"
cols="insertNumber"
style="font-size:12pt"
Example:
<textarea rows="5" cols="30" style="font-size: 12pt" id="myText">Enter
Text Here</textarea>
How do you increase the height of an textbox? (along with its font size)
I'm assuming from the way you worded the question that you want to change the size after the page has rendered?
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;" .....>
Note that if you want a multi line text box you have to use a <textarea> instead of an <input type="text">.
Increasing the font size on a text box will usually expand its size automatically.
<input type="text" style="font-size:16pt;">
If you want to set a height that is not proportional to the font size, I would recommend using something like the following. This prevents browsers like IE from rendering the text inside at the top rather than vertically centered.
.form-text{
padding:15px 0;
}
<input type="text" style="font-size:xxpt;height:xxpx">
Just replace "xx" with whatever values you wish.
With inline style:
<input type="text" style="font-size: 18pt; height: 40px; width:280px; ">
or with apart CSS:
HTML:
<input type="text" id="txtbox">
CSS:
#txtbox {
font-size: 18pt;
height: 42px;
width : 300px;
}
If you want multiple lines consider this:
<textarea rows="2"></textarea>
Specify rows as needed.
Don't the height and font-size CSS properties work for you ?
Use CSS:
<html>
<head>
<style>
.Large
{
font-size: 16pt;
height: 50px;
}
</style>
<body>
<input type="text" class="Large">
</body>
</html>