CODEWITHSUNDEEP
css
Darama
Darama

Reputation: 3370

How to display textarea over all elements?

I have simple HTML code with one textarea element. When I click it I need to set opacity 0.8 to body and display textarea over body.

How to do this?

I tried:

body {
   opacity: 0.8;
z-index: 1
}

textarea {
   position:relative:
z-index:100;
}

Upvotes: 1

Views: 957

Answers (3)

Folusho
Folusho

Reputation: 382

I believe that what you're trying to achieve is to focus the user's attention on the textarea. So, you almost have the solution. Apart from using the right value for position (as mentioned by @Andrey Fedorov), you should use the :focus pseudo-class as follows:

textarea:focus {
    box-shadow: 2px 2px 3px #66dd88, -2px -2px 2px #66dd88;
}

This way, when the user clicks the textarea, it is made distinct from the rest of the page. NOTE: From the tags you gave your question, I assumed you don't want to use Javascript.

Upvotes: 0

Asons
Asons

Reputation: 87211

If you set opacity on the body itself, all its children will get it too, so for that to work properly, it should look something like this, where you use a .dimmer to do the actually semi transparency.

This way you can have many items working similar

.dimmer {
  position: fixed;
  left: 0; top: 0;
  right: 0; bottom: 0;
  display: none;
  background: white;
  opacity: 0.8;
  z-index: 99;          /*  immeadiate below textarea  */
}

input, textarea {
   position: relative;
}

input.use-dimmer:focus,
textarea.use-dimmer:focus {
  z-index: 100;
}
input.use-dimmer:focus ~ .dimmer,
textarea.use-dimmer:focus ~ .dimmer {
  display: block;
}
<p>hello there, this is just a text to show how this work</p>

<textarea class="use-dimmer">sample text</textarea>
<br>
<input class="use-dimmer" value="sample text"/>

<div class="dimmer"></div>

Upvotes: 1

br3t
br3t

Reputation: 1658

$(document).ready(function() {
  $("body").on("focus", "textarea", function() {
    $("body").addClass("textareaded");
  });
  $("body").on("blur", "textarea", function() {
    $("body").removeClass("textareaded");
  });
});
.textareaded .content {
  opacity: 0.5;
}
.textareaded textarea {
  position: fixed;
  top: 10px;
  width: 90%;
  left: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>
<textarea></textarea>

Upvotes: 0

Related Questions