This question already has answers here:
HTML5 textarea placeholder not appearing
(8 answers)
Closed 2 years ago.
I have two issues that are occurring, the place holder will not appear and whenever I click on my textarea, it starts typing from where I clicked instead of the top left?
textarea {
outline: none;
resize: none;
text-align: start;
border: 1px solid black;
width: 100%;
overflow: hidden;
}
<textarea cols="70" rows="4" placeholder="Adding a rich description will help with the search result">
</textarea>
A placeholder will only appear if there is no content in the textarea.
You have set default content of "a bunch of spaces and a new line".
Remove the content between > and <.
Related
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Remove or disable focus border of browser via javascript
(9 answers)
Closed 2 years ago.
I have an input section for text and I would like the border-radius of that input to be 50px.
However, when I have the border-radius, the original border is still visible when that field is selected.
I have added a picture below where you can clearly see what I'm referring to. The light border with radius is what I want, but I am also getting another rectangular border.
Here's the CSS I currently have:
.searchbox {
width: 560px;
height: 39px;
border-color: #dedede;
border-style: solid;
border-radius: 50px;
}
HTML for this is basic input:
<input type="text" name="q" class="searchbox">
You should add
.searchbox:focus {
outline: none;
}
.searchbox {
width: 560px;
height: 39px;
border-color: #dedede;
border-style: solid;
border-radius: 50px;
}
.searchbox:focus {
outline: none;
}
<input type="text" name="q" class="searchbox">
Reference
:focus
You can add outline: none; to the :focus styles.
Never do this!
Some people navigate webpages with the tab key on their keyboard because they can't use a mouse. The outlines around elements help them see what they are focusing on. You are basically confusing them if you do this.
So you should definitely do something else on focus, such as change the background.
Just add
.searchbox:focus {
outline: 0;
}
to your CSS
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 3 years ago.
Is there function like hover or something, which checks ifs special area (div or something) is clicked right now or not ?
I have some div's with some text and other data, and if i click 1 of them, i want it to do my special stuff after clicking.
For example there are 2 div's, if i click first it has to do something for me. (i have a lot of data in that div, not only textarea, input texts, also buttons etc.)
OR is it possible to check if Iclicked div's area? If yes i want to do transform:scale of its area in css (multiplying size)
.a:active{
color: brown;
background-color: yellowgreen;
}
<div class="a">
you text
</div>
How about :focus?
You do have to set the div's tabindex property to let it receive focus, however.
Example:
div {
height: 100px;
width: 100px;
border: 1px solid;
display: inline-block;
tabindex: 0;
}
div:focus {
transform: scale(1.5, 1.5);;
}
<div tabindex="0"></div>
<div tabindex="0"></div>
<div tabindex="0"></div>
For some reason one of my inputs acts weird. I apply general css for all my inputs
.text-input {
padding: 6px 10px;
background: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
width: 330px;
border-bottom: 1px solid #000;
}
and I apply this specific css for one particular div to make it higher
#letter {
height: 100px;
}
For some reason when I focus on #letter input and start typing text appears in vertical middle of it, I don't know what is causing the problem, but here is my page, if you focus on "Message" input you will see what I mean (tested in chrome).
http://freshbeer.lv/development/en/contact.php
Perhaps you want to use a textarea instead? input type="text" is single line only.
You should use a Text Area element for that.
<textarea></textarea>
This question already has answers here:
How do I disable the resizable property of a textarea?
(20 answers)
Closed 8 years ago.
How to disable the grabber in the <textarea>?
I mean that triangle thing which appears in the right-bottom corner of the <textarea>.
Just use resize: none
textarea {
resize: none;
}
You can also decide to resize your textareas only horizontal or vertical, this way:
textarea { resize: vertical; }
textarea { resize: horizontal; }
Finally,
resize: both enables the resize grabber.
<textarea style="resize:none" name="name" cols="num" rows="num"></textarea>
Just an example
example of textarea for disable the resize option
<textarea CLASS="foo"></textarea>
<style>
textarea.foo
{
resize:none;
}
</style>
I have an HTML tag with a short maxlength but a long value attribute. I'd like the displayed text to show the end (right side) of the text, rather than the start (left side).
<input maxlength=10 value="A really really really long entry goes in here"/>
currently shows:
"A really r"
instead I'd like it to show:
"es in here"
Cheers,
Ian
Do you want the visible area to start from the right? you can use css and the following rule input {direction:rtl;}
rtl means from right to left
example: http://jsbin.com/ilejo4
PS: the value of maxlength in your html must be wrapped with quotes, also you have to set the type of the input
Add style="text-align:right" to the input tag.
If you only want to display information, what you can do is place a span inside a div, in the div write overflow:hidden, display flex, justify-content: flex-end;
.contenedor{
width: 100px;
background-color: black;
color: white;
border-radius: 5px;
display: flex;
justify-content: flex-end;
overflow:hidden;
padding: 5px;
}
<div class="contenedor"><span>12345555555566final</span></div>