I have the following info on a web site that I can not edit the html, but I can edit the CSS.
<textarea id="gui-form-comment" name="comment" placeholder="Comment" style="width:100%;" data-validate-before-update="false"></textarea>
I want to change the placeholder to something else.
Technically it is not possible, but you can mimick the behaviour in modern browsers. But you need a selector for the parent element of the textarea and you may need to tweak the font, size and position of the #container::before pseudo-placeholder to match the formatting of your textarea.
/* Hide real placeholder */
#container textarea::placeholder {
color: transparent;
}
/* Add pseudo-placeholder */
#container::before {
content: 'New placeholder';
position: absolute;
font-family: monospace;
padding: 4px;
pointer-events: none;
}
/* Show and hide the pseudo-placeholder */
#container textarea {
position: relative;
}
#container textarea:placeholder-shown {
position: static;
}
<div id="container">
<textarea id="gui-form-comment" name="comment" placeholder="Comment" style="width:100%;" data-validate-before-update="false"></textarea>
</div>
So if you can specify the height to the textarea then it'd be easy to make it happened:
<textarea
id="gui-form-comment"
name="comment"
placeholder="Comment"
style="width: 100%; height: 100px;"
data-validate-before-update="false"
></textarea>
<style>
#gui-form-comment::placeholder {
line-height: 100px;
}
</style>
The ::placeholder is actually safe to use (https://caniuse.com/?search=%3A%3Aplaceholder)
Related
I have a textarea and when I click to add some text it starts from the top left corner of the textarea and it seems ugly. Can I change the position where the cursor starts ?
<TextArea
placeholder=' Type your comment here...'
value={comment}
onChange={e => setComment(e.target.value)}
>
</TextArea>
I was able to change the position of placeholder the way below but not the cursor
::placeholder {
color: #C8C8C8;
position: absolute;
left: 15px;
top: 15px;
}
You can use CSS to style a <textarea>. You can change the alignment of the text...
textarea {
display: block;
width: 100%;
text-align: center;
}
<!--
borrowed from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
-->
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
Or add padding to the element:
textarea {
display: block;
width: 100%;
padding: 15px;
}
<!--
borrowed from
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
-->
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
What would be correct approach to aligning placeholder to the top of the field, while input text appearing normally in the middle?
Any way to do that with CSS on input/::placeholder only, or should i rather construct a wrapper with span that would disappear when active and input field below it?
Here's a fiddle of what i've got now: https://jsfiddle.net/ejsLfvdn/1/
And that's what it should look like up to customers will:
The input masks are not the case here, i'm only struggling with the placeholder being aligned to the top, while input should appear normally in the middle. The placeholder MUST disappear after filling input.
I don't think that you will be able to do this by directly targeting the placeholder pseudo class (::placeholder).
Only a small subset of CSS properties can be applied to this element and position is not one of them:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
I think you will need to take the approach of a wrapper with span and input and position appropriately.
You could use something like this with the only issue being the input must have the required attribute.
* {
box-sizing: border-box;
}
.input {
display: flex;
flex-flow: column-reverse nowrap;
border: 1px solid gray;
width: 220px;
}
.input input:valid + label {
opacity: 0;
}
.input input {
width: 100%;
padding: 10px;
border: none;
}
<div class="input">
<input required id="username" name="username" type="text" />
<label for="username">Username</label>
</div>
I hope I achieved what you need.
btw, I used jquery to hide the placeholder while typing and display it again if the field is empty.
$('.form-control').keyup(function(){
var val = $(this).val();
if(val == ""){
$('.placeholder').show();
}else{
$('.placeholder').hide();
}
});
.input-cont{
position: relative;
}
.form-control{
border: 1px solid #DDD;
border-radius: 5px;
height: 40px;
padding-left: 8px;
}
.placeholder{
position: absolute;
top: 5px;
left: 8px;
color: #3dc185;
font-size: 12px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form>
<div class="input-cont">
<span class="placeholder">Imię</span>
<input class="form-control" type="text" name="name">
</div>
</form>
</body>
</html>
You can use translateY(-100%) on your placeholder to move the text upwards and then give your textbox some padding at the top to reveal the text:
.placeholder-offset {
font-size: 20px;
padding-top: 25px;
}
.placeholder-offset::placeholder {
color: red;
transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />
I have a responsive form element which is supposed to be inline with a title, like so:
which is fine in Firefox because this is what I'm looking for.
But when we see the same code in Chrome (edit, same results in Blisk, Yandex and maybe all webkit browsers, along with MS Edge and IE11), this is what I get:
The code:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: table-cell;
}
.field,
input {
width: 100%;
}
input,
.btn {
padding: 10px 16px;
box-sizing: border-box;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
Or, take a look at the code here (Codepen.io).
Does FF and Chrome handle the CSS differently? I feel that Chrome is showing the correct layout considering that the .field class has display: table-cell;, but I'm not sure about that. Is there a way to achieve what Firefox has shown in Chrome as well without removing the responsive nature of the input field?
Thanks.
Just remove the property: table-cell and make sure that everything is inline-block:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: inline-block; /* instead of table-cell > inline-block */
}
input,
.btn {
padding: 10px 16px;
}
SEE demo here: CODEPEN
There is no need to use table-cell just use float:left and remove the width from field class.
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
float: left;/* Use floating here */
}
.field,
input {
/*width: 100%;*/
}
input,
.btn {
padding: 10px 16px;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
I need to hide a newsletter form when the user press the sign up button ("Cadastrar" in portuguese) and this is already happening as you may check on my website. However, the success message is rendered with unnecessary line breaks. Why?
I need to fill the entire height of the footer (without fixing the height in the child div, if possible), but the text should be vertically centered in the red box.
You'll probably find easy to check the problem by going to my website, filling the email address field and clicking the button bellow, but here is the HTML rendered there.
<div id="mc4wp-form-1" class="form mc4wp-form mc4wp-form-3571 mc4wp-ajax mc4wp-form-success">
<form method="post" lpformnum="1" _lpchecked="1">
<input type="email" name="EMAIL" class="text" placeholder="Seu email" required="">
<input type="submit" class="bt" value="Cadastrar"><span class="mc4wp-ajax-loader" style="display: none; vertical-align: middle; height: 16px; width: 16px; border: 0px; margin-left: 5px; background: url(/img/ajax-loader.gif) 50% 50% no-repeat;"></span>
<div style="position: absolute; left: -5000px;">
<input type="text" name="_mc4wp_required_but_not_really" value="" tabindex="-1">
</div>
</form>
<div class="mc4wp-response">
<div class="mc4wp-alert mc4wp-success">Obrigado, seu cadastro foi efetuado com sucesso! Por favor verifique seu e-mail.</div>
</div>
</div>
Here is an attempt to reproduce on jsfiddle.
Possible solution add float: left; property to mc4wp-error selector
.mc4wp-error {
background-color: #FEE7ED;
color: #F41952;
border-color: #F41952;
float: left; <----Add this
}
Reason why text is breaking
Newsletter, input and button pushing and breaking the text
Remove float:left from
footer form {
width: 100% !important;
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: 0px;
min-height: 200px;
}
Mobile view and CSS changes max-width:480px
#media (max-width: 480px) {
footer form {
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: inherit;
min-height: 200px;
bottom: -90px;
}
}
If you change:
.mc4wp-alert {
...
...
position: relative;
}
to position: fixed;, you will find that the space is actually occupied by the email text-box and the button. The solution is to use position: absolute;. I tested it in Chrome and IE11.
I am designing a web page with multi line Label name & input type file. i tried very hard to arrange in same line sequence but failed to do. Is there any idea about it?
please take a look enter link description here , it looks very ugly and
I am not really sure what you are looking for, but check out the jsfiddle changes I had made. I modified both CSS classes a little bit.
Have a look at this tutorial: http://www.websiteoptimization.com/speed/tweak/forms/
You can check this fiddle with the following modifications:
removing deprecated attributes align from div and moving inlined CSS style (style attribute) to the CSS file
same for b element used for the text of the label: span is better, and it's already bold as its parent. Or font-weight: bold; would be added in CSS
display: inline-block; is used instead of floats. No need to clear them afterward. IE7 and 6 need a fix (in comment) if you support them. This allow you to give the element a width (like you could do with any block element) and still get them on the same horizontal line (like you could do with any inline element). You'll have 4px due to whitespace in your HTML code, because whitespace shows up in inline element like two span separated by a space but there's a fix.
HTML code
<div id="divid1">
<p>
<label class="labelname"> <span> select Image* :</span>
<input type="file" name="file1" class="hide-file" />
</label>
</p>
<p>
<label class="labelname"> <span>XML File* :</span>
<input type="file" name="file2" class="hide-file" />
</label>
</p>
</div>
CSS
#divid1 {
padding: 50px;
}
.labelname {
width: 100%; /* or at least approx. 380px */
min-height: 30px;
display: block;
background: lightgreen;
font-weight: bold;
margin-bottom: 2px;
}
/* Only for IE7 */
/*.labelname span,
.hide-file {
display: inline;
zoom: 1;
}
*/
.labelname span {
display: inline-block;
width: 140px;
text-align: right;
background-color: lightblue;
}
.hide-file {
display: inline-block;
opacity:0.5;
}
now it looks good :)
html
<div id="divid1" align="center" style="padding:50px;">
<div class="formrow">
<label class="labelname" for="hide-file">Select Image* :</label>
<input type="file" name="file1" class="hide-file" />
</div>
<div class="formrow">
<label class="labelname" for="hide-file">XML File* :</label>
<input type="file" name="file2" class="hide-file" />
</div>
</div>
css
.labelname {
background: green;
font: bold 2px;
margin-bottom: 2px;
font-weight: bold;
float: left
}
.hide-file {
position: relative;
opacity: 0.5;
float: right
}
.formrow {
width: 400px
}