I have a span overlapping my input field, that updates its content as you type into the input field.
Even though I positioned the span perfectly on the input text, you can still see that the text is a little more bold and letters are thicker.
(field nr.1- with span, nr.2- without)
I tried hiding the entire input field, but then also the cursor disappears, without which typing is very confusing.
Is there a way that I could hide only the text of the input field?
Just set your input text invisible and the cursor black by:
#box {
color: transparent;
caret-color: black;
}
<input type="text" id="box" value="some_sample_text">
So this way the text is invisible but the currsor shows up. With your span overlaying this should be exactly what you want. But don´t forget your input field must have the same size and fontsize or the caret is on the wrong position.
Ok, after some time, here's what I landed on:
input{
position: absolute;
top: 25px;
left: 25px;
}
#bottom {
z-index: 1;
}
#top {
z-index: 3;
}
<div class="txt">
<input type="text" id="bottom" value="bottom_box">
<input type="text" id="top" value="top_box">
</div><br>
Related
.button{
outline-color: rgba(0,0,0,0.7);
width:290px;
margin: 20px 10px 10px 5px;
height:80px;
font-size:44px;
color:orange;
background-color:rgba(0,0,0,0.7);
border: 0;
border-bottom:2px solid black;
cursor:pointer;
}
.button:hover{
background-color:rgba(0,0,0,0.7);
}
.button:focus{
background-color: rgba(0,0,0,0.7);
width: 300px;
}
<form action="" onsubmit="return submitMove()">
<label class="lable">First Coordinate</label>
<div><input class="button" type="text" id="currentCoordinate" onchange="backgroundColor: rgba(0,0,0,0.7)" onclick="clickInput()"></div>
<lable class="lable">Second Coordinate</lable>
<div><input class="button" type="text" id="moveToCoordinate" onchange="backgroundColor: rgba(0,0,0,0.7)" onclick="clickInput()"></div>
<button class="button" onclick="clickInput()">Submit move</button>
</form>
function clickInput() {
document.getElementById("currentCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
document.getElementById("moveToCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
}
What I wanted is to make the input field not change color in any way at all. Which I simply can't make works. Any solution which needed CSS or javascript is fine. I want the form color to remain black at all time. Or is there a way to stop the form from doing the drop down suggestion thing when you click on the input form? Thanks
I want the color to always be looking like the input form on the bottom, and not whitening up like the input form on top
Hover Effect
Remove this piece of code if you don't want the input color to change on hovering it:
.button:hover{
background-color:rgba(0,0,0,0.7);
}
Select Effect
Remove this piece of code if you don't want the input color to change on selecting it:
.button:focus{
background-color: rgba(0,0,0,0.7); // Remove this line
width: 300px;
}
,remove the onclick="clickInput()" from the Form and remove the function -
function clickInput() {
document.getElementById("currentCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
document.getElementById("moveToCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
}
Input Change Effect
Remove this piece of code if you don't want the input color to change when the data in the input box changes:
onchange="backgroundColor: rgba(0,0,0,0.7)"
Browser Effects
This is the default style added by the browser (Blue outline in most cases) to overcome this:
.button:focus{
outline: none; // Add this line
}
I have a textarea and when I type something, for some words the color should change.
For example, if the typed text is next one: He went to the market to buy an apple
The "market" word should become green
The "apple" word should become red
This is my current code:
var str = 'market';
var value = str.includes('market');
if (value == str) {
document.getElementById("text").style.color = "green";
} else {
document.getElementById("text").style.color = "red";
}
<textarea rows="9" cols="100" id="text" onClick="changeText();"></textarea>
Unfortunately, you can't add markup inside a textarea, but here is an idea you could take as a starting approach, it comes from this link. The approach will be based on this:
The basic idea is to carefully position a <div> behind the <textarea>. Then JavaScript will be used to copy any text entered into the <textarea> to the <div>. A bit more JavaScript will make that both elements scroll as one. With everything perfectly aligned, we can add markup inside the <div> to give colors to some particular words, and we going to set text color to transparent on the <textarea>, completing the illusion.
Base Implementation:
// Initialization.
const colorMap = {"apple": "red", "market": "green", "banana": "orange"};
let textArea = document.getElementById("myTextArea");
let customArea = document.querySelector(".custom-area");
let backdrop = document.querySelector(".backdrop");
// Event listeners.
textArea.addEventListener("input", function()
{
customArea.innerHTML = applyColors(textArea.value);
});
textArea.addEventListener("scroll", function()
{
backdrop.scrollTop = textArea.scrollTop;
});
function applyColors(text)
{
let re = new RegExp(Object.keys(colorMap).join("|"), "gi");
return text.replace(re, function(m)
{
let c = colorMap[m.toLowerCase()];
return `<spam style="color:${c}">${m}</spam>`;
});
}
.backdrop, #myTextArea {
font: 12px 'Open Sans', sans-serif;
letter-spacing: 1px;
width: 300px;
height: 100px;
}
#myTextArea {
margin: 0;
position: absolute;
border-radius: 0;
background-color: transparent;
color: transparent;
caret-color: #555555;
z-index: 2;
resize: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid transparent;
overflow: auto;
pointer-events: none;
}
.custom-area {
white-space: pre-wrap;
word-wrap: break-word;
}
<div class="container">
<div class="backdrop">
<div class="custom-area">
<!-- Cloned text with colors will go here -->
</div>
</div>
<textarea id="myTextArea"></textarea>
</div>
Note this is just a base approach to understand the underlying idea. But with some work on it, maybe you can get a generalized version. For example, by now, the textarea can't be resizable. But maybe you can detect that event and rezise the backdrop dinamically.
You can style the text in the textarea as a whole, but since a textarea does not have sub-elements such as or you cannot give separate text within that textarea separate styles.
on the other hand if you had a separate div displaying a copy of the text you could in the innerHTML of the div assign
apple
to replace the word apple in the .. but the text in the textarea would remain unchanged.. possibly overlay div on top of the textarea but hidden until text is entered in the textarea. Not certain of the precise code to do that piece or if it would work. but at least it is a viable logic chain that I hope may help you find a solution.
To color a specific word from that text you must wrap that word with a html tag. But textarea doesn't support html tag.
You can do it outside of the textarea field.
in my website, I have a search box, select box and a button arranged in same row,I have fixed a width to select option to some pixel, also I have given width of textfield in to 80%, and the remining space given to the submit button, but the issue is whenever a large text comes in select option, the textfield falls to down, what i need it has to arrange width of text field automatically by the size of select box, I am fiddling my code here
<div class="my-search">
<select>
<option>All</option>
<option>All</option>
<option>All</option>
</select>
<input type="text" class="seacrh-input" />
<input type="button" value="oke" class="input-btn" />
</div>
css
.my-search {
width:250px;
background:red;
}
select, input {
float:left;
}
input[type="text"] {
width:60%;
}
and this fiddle is working fine, but for the same thing I have changed the value of select option, then the select box size is increased and the layout failed, is there any way to show this in proper ?
check the second fiddle, which having issue here
I need a search box like www.amazon.in
Do you want something like this?
.my-search {
width:250px;
background:red;
display: inline;
}
select, input {
display: inline-block;
}
input[type="text"] {
display: inline-block;
float: none;
}
https://jsfiddle.net/25kvqzf8/3/
Maybe this is what you want? JSFiddle
.my-search {
width:250px;
background:red;
display: inline;
}
select, input {
display: block;
float: left;
margin:0;
box-sizing: border-box;
height: 20px;
}
select{
width: 48px;
}
I'm based on user #r00t reply.
I assumed that you want to resize the select box according to the content. So I have added some jQuery to achieve this (you have tagged jQuery).
I have added a dummy span to calculate the width of the select.
For outer div
display:table
And for the select and input
display:table-cell
will provide the required effect. Here the select and input fields will resize accordingly.
Has modified the code according to the amazon.in reference. Just change the width of input according to the change in select box size.
input_size = total_width - (select_width + button_width)
Also fix a initial width for the select box.
Fiddle here
You just need to change float: left to display: inline-block and fix the width of select :
<div class="my-search">
<select>
<option>All</option>
<option>All</option>
<option>All</option>
</select>
<input type="text" class="seacrh-input" />
<input type="button" value="oke" class="input-btn" />
</div>
.my-search {
width:250px;
background:white;
}
select, input {
display: inline-block;
}
select {
max-width: 20%;
}
input[type="text"] {
width:60%;
}
I have got a problem, I'd like to select text that is inside a div, here is jsfiddle http://jsfiddle.net/KL6G3/
html:
<div id="connect">some text some text: <div id="select" onmouseover="this.focus();this.select();">when you hover over therer, it gets selected</div></div>
CSS:
#connect {
resize: none;
font-family: 'Ubuntu', sans-serif;
text-transform: uppercase;
position: relative;
top: 4px;
border: none;
}
#connnect:focus {
border: none;
}
#select {
display: inline-block;
}
When I hover over #select, text doesnt get selected, what am I doing wrong?
Thanks
this.focus(); and this.select(); will only work for input and textarea.
Here is a simple way:
Assign contenteditable attribute to that particular element. If user set focus into editable div then content of editable div is selected.
<div contenteditable="true" onmouseover="document.execCommand('selectAll',false,null)" id="connect">some text some text: <div>when you hover over therer, it gets selected</div></div>
JSFiddle Demo
What is the purpose of the selection? To highlight or to copy the text? You can use CSS to highlight and zero clipboard to copy, and combine both of them, if you want highlight and copy to clipboard. Avoid contenteditable if it is not an editable area.
guys i am new to html ... i want to make this Username: <input type="text" name="Username" style=" -
margin-top: 200px; "> appear at the center of the page not at the top .. i tried making the postion absolute and change the margin top but i found that only the empty text filed appears at center and the word "Username" still at the top .. so any help ??
write it into a div container. Dont forget to set height and weight to set it auto center
<div style="width:200px;height:1em;margin:auto;">Username <input type="text" name="username"/></div>
You'll need to wrap your entire line in a span tag.
This will allow you to reference all of the text rather than just the input.
So,
<span style="-margin-top: 200px;">Username: <input type="text" name="Username"></span>
should do the trick.
As for the positioning, you're probably looking for the Absolute Center technique.
element {
text-align: center;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}