I would like to change watermark text and pup-up text on my search bar. I would like to do it with some CCS.
I know that it not recommended but I think that this is the fastest way.
I have readen How can I replace text with CSS? and How to use CSS to replace or change text? but my case is more complicated.
I tried:
input.search-field.placeholdit.watermark span{
display:none !important;
}
input.search-field.placeholdit.watermark:after{
content: 'TEXT'!important;
}
And some other combinations with span.screen-reader-text, search-wrapper, search-field.placeholdit. The only thing which I achived was earasing searchbox window.
Search box looks like on image bellow - I would like to change "Search ..." and "Search for:" texts:
Search box code:
<div class="search-wrapper">
<form role="search" method="get" class="search-form" action="my.website.com">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field placeholdit" value name="s" title="Search for:">
</label>
<input type="submit" class="search-submit" value="Search">
</form>
</div>
If there are better ways to change it, I would like to hear it. Beginnings are rough but I would like to learn how to change webpages properly.
Don't use CSS for this. Just change the "placeholder" and "title" attributes in your HTML:
<input type="search" class="search-field" value="" name="s" placeholder="Search" title="Search for:">
You should fix your "value" attribute too.
Related
I am not able to type in the input field. When I remove the first div that has the id="viewport" I am able to type in the input field. How am I able to solve this?
<div id="viewport"></div>
<div class="form">
<h2 id="h2">Need a project from<br>Google Cloud Storage?</h2>
<form id="fileDownloadForm" method="GET" action="downloadBlob2" enctype="multipart/form-data">
<input type="text" id="textBox" name="objectToSearch" placeholder="Type the name of the project here." />
<button id="downloadBtn" type="submit" class="btn btn_primary">Download</button>
</form>
</div>
You may solve this by adding css attribute #textBox{ z-index:1000; }. It seems that viewport block is too big and overflowing the input field. z-index makes the input field more "important" - the bigger it is, the more important the element becomes.
just in case to others, what works for me is putting in the immediate tag. So in this case I will try to put it in:
<div class="form" style="z-index: 1000 !important;">
In my case, somehow the text color changed to white. I found it by accidentally double-clicking the input field after typing few characters.
In my case i used Reactjs app for using
<input type="text" title="Search for products, brands and more" autocomplete="off" placeholder="Search for products, brands and more" name="" value="" />
You can see i put value="" so it is blank. That's why it was not working.
I can't figure out why my input does not allow me to resize it.
<input type="text">
Example of the problem
I only want to have a working resize on my biginput class.
That's simply because <input type="text"> is ment for a single line.
You'll need to use <textarea></textarea> for this.
<input type="text" placeholder="I can't be resized"></input>
<textarea>I can be resized</textarea>
In order to do this in Google Forms, use the option 'Paragraph Text' instead of 'Text' when selecting an answer.
You need textarea for that :-
<textarea name="entry.585452596" type="text" class="biginput"></textarea>
I'm trying to get the Search Form Hero to look like this:
https://revolution.themepunch.com/wordpress-search-form-hero/
But the search button is always below the input field like this:
http://cheeky.travel/landing-2/
My hunch is it has something to do with vertical-align but not sure. This is the HTML:
<form role="search" method="get" id="searchform" class="revtp-searchform" action="https://cheeky.travel"><input type="text" value="" name="s" id="s" placeholder="What are you looking for?" /><input type="hidden" value="product" name="post_type" /><input type="submit" id="searchsubmit" value="Search" ></form>
Any ideas? I've tried to use span and row and nothing changes. Thanks!
You'll have to add float:left to the input field.
So I've got a problem.
I've created a text box like that:
<input type="text" id="search" name="search" class="myText" value="Search for a keyword" onclick="value=''"/>
My problem basically is that after I press the text box to write a text of my own, and then press some other place on the screen, the value I set at start (Search for a keyword) will not be displayed once again.
I've tried everything. How do I make it display again once I've pressed some other place on the screen?
Get rid of the onclick="value=''
You are basically saying, empty the box whenever I click on it.
If you can use html5, you can use:
<input type="text" id="search" name="search" class="myText" placeholder="Search for a keyword" />
And you can style it as well:
<style type="text/css">
::-moz-placeholder {color:#ddd;}
::-webkit-input-placeholder {color:#ddd;}
:-ms-input-placeholder {color:#ddd;}
</style>
You should use the placeholder attribute :
Example :
<input name="Email" type="text" id="Email" value="email#abc.com" placeholder="Enter your mail" />
I am learning how to make forms and made this for practice. When I have labels out it and try to click into any of the form elements, it selects the previous one. For example, if I click into the password input box, it sends me to the username input box. When I remove the labels the bug goes away. I'm pretty sure labels aren't supposed to do this. The console isn't showing any errors so I'm confused to why this is acting up.
Here is my code:
<form action="">
<fieldset>
<label>username<label>
<input type="text" id="userInput"/>
<label>password<label>
<input type="password" id="passwordInput"/>
<label>Hidden<label>
<input type="hidden" id="hiddenInput" value="I can't tell you"/>
<label>Text Area<label>
<textArea id="areaInput" rows="10" cols="40">
This is a big area with lots of text.
</textArea>
<input type="button" onClick="" value="submit"/>
<fieldset>
<form>
Looks like you are not closing your label tags, so you are making another label. You need to close the <label> by using </label> - just a typo!
You're not closing out your <label> tag. Use the / slash on the closing tag:
<label>username</label>