I need a text area field with an embedded button, like on this image:
__________________________________
|Lorep ipsum lorep ipsum lorep ipsu|
|m lorep ipsum lorep ipsum lorep ip|
|sum lorep ipsum lorep ip _________|
|sum lorep ipsum lorep ip| OK |
|________________________|_________|
The text should flow around the button, without being hidden under it.
The only option I could imagine is custom SVG component with text and user action handlers, but that seems to be a bit overkill.
Any suggestion on simple (may be not perfect) approach for this task?
I totally suck at this client-side stuff, but it seems to be possible with contenteditable.
.input {
width: 300px;
}
.submit {
border: 1px solid black;
float: right;
text-align: center;
padding: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class='input' contenteditable=true>
<div type='button' class='submit' contenteditable=false>Save</div>
The text should flow around the button, without being hidden under it.
The only option I could imagine is custom SVG component with text and user action handlers, but that seems to be a bit overkill.
Any suggestion on simple (may be not perfect) approach for this task?
</div>
</body>
</html>
It's not quite what you asked for, but maybe a different approach to take. I'm positioning the button at the bottom of a contenteditable div and only showing you it when you hover the lover section.
As i said, it's not a 'solution', more of a different approach of an issue.
.wrap {
position: relative;
}
.text {
height: 200px;
width: 400px;
background: rgba(0, 0, 0, 0.4);
overflow:auto;
}
.bot {
position: absolute;
bottom: 0;
height: 20px;
width: 400px;
padding-bottom: 5%;
}
button {
position: absolute;
height: 100%;
width: 100px;
right: 0;
transition: all 0.8s;
opacity: 0;
}
.bot:hover button {
opacity: 1;
}
<div class="wrap">
<div class="text" contenteditable="true">
You can type in me! hover my lower section and you'll see the button!
</div>
<div class="bot">
<button>OK</button>
</div>
</div>
Note
This 'solution' could be tidied up, as most css styling is for 'extra bits', like overflow and transitions.
This is not possible with a textarea. But you can do it contenteditable div.
<div contenteditable="true"></div>
jsFiddle
HTML
<div>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button>OK</button>
</div>
CSS
div{
display:inline-block;
position:relative;
}
button{
position:absolute;
bottom:10px;
right:10px;
}
div{
display:inline-block;
position:relative;
}
button{
position:absolute;
bottom:10px;
right:10px;
}
<div>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button>OK</button>
</div>
Related
I have a CSS-only tooltip that uses a special element attribute to provide the content:
<li class="privTooltip" data-tooltip="My tooltip text">
Which is then handled in CSS:
<style>
[data-tooltip]:after {
content: attr(data-tooltip);
...styling...
}
</style>
But this only supports raw text. If I try to provide any HTML tags, like data-tooltip="<b>Granted through role paths</b>...more stuff", they aren't interpreted:
Text decoration, maybe a simple HTML table, etc.. would make these a lot nicer. I know I can write a DOM-based tooltip that does just about anything, but I'd like to know if it's possible with this lighter-weight pseudo-element CSS-only method.
This solution doesn't use your exact method, but it is CSS-only, which it sounds like is the important part for your use-case. You could try something like this, which allows you to style the tooltip's content with CSS.
EDIT: here's a live version of this in CodePen
HTML
<div class="tooltip">
<!-- put the content you want to hover over here -->
<img style="width: 40px; padding: 16px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/1200px-Infobox_info_icon.svg.png">
<span class="tooltiptext">
<!-- put the tooltip here -->
<strong>Title 1:</strong> Lorem ipsum.<br><br>
<strong>Title 2:</strong> Lorem ipsum.<br><br>
<strong>Title 3:</strong> Lorem ipsum.<br><br>
<strong>Title 4:</strong> Lorem ipsum.
</span>
</div>
CSS
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #fff;
color: #000;
text-align: left;
border-radius: 4px;
border: 1px solid #d0d0d0;
padding: 8px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
I’m having trouble with some basic positioning that I wouldn’t usually encounter. I just want the subscribe button to be 20% wide as it should be and to the left of the input form.
Displaying as a block, inline or inline-block with left floats does nothing, which seems to be the obvious solution.
I’m not sure why but as soon as I added the mail chimp code the input form remains the same but the button displays on the next line below and is wider than it was. I have set the ids and classes to obey the internal stylesheet and not mail chimp’s.
Why is this element not obeying basic styling? Or am I missing something basic?
Appreciate any help, thanks.
#newsletter {
background: lightblue;
width: 56%;
height: 100%;
padding: 0 0 0 25px;
display: table-cell;
}
.f1 {
display: block;
text-transform: uppercase;
color: darkblue;
font-size: 20px;
line-height: 1;
padding-bottom: 15px;
}
.f2 {}
#f-sm,
#f-em {
padding-top: 15px;
display: block;
}
#f-em form input {
margin: 0;
width: 80%;
height: 30px;
background: pink;
float: left;
}
#newsletter-button {
width: 20%;
height: 30px;
float: left;
background: lightblue;
}
<div id="newsletter">
<span class="f1">Newsletter Signup</span>
<span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare...</span>
<span id="f-em">
<form action="action_here" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
</span>
<div class="clear"></div>
</div>
The rule #f-em form input is applying to both button and input. Giving both 80% width.
Both your button (<input type="submit" ...>) and your text field (<input type="text">) match your rule #f-em form input which has width:80%.
Your button also matches your #newsletter-button rule but this is less specific than the above rule so gets over overridden.
This rule #f-em form input in your css is abit not specific its applying to all the input tag elements and still the form and also the #f-em. You can try and make it more specific.
For aligning the button to the left of the form you can try the below code to align it.
form {
margin:0 auto;
width: 80%;
height: 30px;
background: pink;
overflow: hidden;
}
input{
float:left;
width:20%;
}
I'm not having any joy with this so any help would be much appreciated. The basic problem is when I click on Login it presents me with an input box for username but I can't get the focus on the box to enter anything. If I change the css from position:absolute to relative it works but mucks up the layout. Similarly if I remove the code for the About tab it works. I guess there might be something going on with layering as the dropdown for each tab occupies the same space but it defeats me so far. I'm working in Chrome and IE11. It's a personal project so not bothered about other browser compatibility.
Here is the code:
<body>
<style>
.panel div {
opacity:0;
width: 100%;
position:absolute;
top: 34px;
}
.panel .tab-link {
float: left;
width: 20%;
padding: 7px;
background:#ddd;
margin-right: .5%;
text-align: center;
}
.anchor:target + .panel div {opacity: 1;background: #ccc;}
.anchor:target + .panel .tab-link {opacity:1;background: #ccc;}
</style>
<span class="anchor" id="login"></span>
<div class="panel">
<a class="tab-link" href="#login">Login</a>
<div>
<div>
<input name="test" type="text" placeholder="Username or email" value="" autofocus>
</div><br><br><br>
</div>
</div>
<span class="anchor" id="about"></span>
<div class="panel">
<a class="tab-link" href="#about">About</a>
<div><h2>Hello World</h2></div>
</div>
</body>
Alternatively I have a jsfiddle for you.
http://jsfiddle.net/PCaAC/
You need to add z-index:2; to your input in CSS.
As Beardminator stated. A z-index is sufficient. However, I wouldn't use 2. If you skip a number of precedence in a z-index you will leave gaps in your layering. use 1. Just in case you need to layer something else, then you can use 2 and so forth.
.panel .tab-link {
float: left;
width: 20%;
padding: 7px;
background:#ddd;
margin-right: .5%;
text-align: center;
z-index:1;
}
Also, I changed you html a little for a more solid markup. You had an extra div set that wasn't needed
check the fiddle
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 9 years ago.
I want to add separate opacity to my header and my div and my form button. I want the div opacity to be 0.5; which is no problem but I don't want my form button to have a opacity. When ever I try to change levels of opacity my header and the form button opacity becomes the same. For example: I want the header opacity to be 0.9 and the div opacity to be 0.5 and no opacity on the submit button, here is my HTML code:
<!DOCtype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adeventist Youth's Empowerment</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<p> </p>
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment. At this website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!! -Shadowcoder </cite></h1>
</div>
<form id="form" method="get" action="Main.html">
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>
</body>
</html>
My css is this:
body {
background-image:url(Images/background%20image1.jpg);
background-repeat:no-repeat;
background-size:100%;
background-position:center top;
}
#apDiv1 {
position: fixed;
left: 279px;
top: 100px;
width: 817px;
height: 390px;
}
#apDiv1 .apDiv1 h1 cite {
font-family: Georgia, Times New Roman, Times, serif;
}
#apDiv1 {
background:#FFF;
opacity: 0.5;
border-radius: 20px;
}
#form {
width: 20em; margin: auto;
}
.button {
display: marker;
background-position:center;
width: 9em;
height: 1em;
border:thin;
border-radius: 20px;
padding: 0px;
text-align: center;
font-size: 2em;
line-height: 1em;
color: #FFF;
background-color: #0C0;
}
.button:hover{
color: #000;
background-color: #0C0;
}
header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 1;
}
* {
margin: 0;
padding: 0;
}
when ever i add opacity to the div the form automatically has that opacity and so does the header.
First off you shouldnt name your div ids and classes the same. It only leads ot confusion. If you formatted your code correctly. It would be very easy to see that oyu never close you apDiv1. You open another one with the same class name. As I mentioned above this is only going to confuse you. Close your outer div at the appropriate place and then it will get its opacity.
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment. At this website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!! -Shadowcoder </cite></h1>
</div>
<form id="form" method="get" action="Main.html">
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>
CLOSE THE DIV HERE OR EARLIER IF YOU WANT
After you fix all that... Give your outer div an opacity this way...
background: rgba(64, 64, 64, 0.5)
from your code, you have missed out the closing tag
To answer your question, you can use something like this to your div
#apDiv1 {
background: rgba(255,255,255,0.5);
border-radius: 20px;
}
where rgb is the color in rgb format, and a is for the alpha
Here you go, I have added three opacity in header, form and apDiv1 class. jsfiddle
.apDiv1{
opacity: 0.2;
}
#form {
width: 20em; margin: auto;
opacity: 0.8;
}
header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 0.7;
}
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg