Altjen B. Altjen B. - 1 year ago 78
ASP.NET (C#) Question

how to activate the functions of a div in css after focusing in a textbox in

I have a div with icon, and a textbox.

this is the code:

<div id="Backtb1">
<i class="fa fa-envelope" id="envelope" aria-hidden="true"></i>
<asp:TextBox ID="TextBox1" CssClass="TextButtons" runat="server" placeholder="Username" ></asp:TextBox>

and the css for both Backtb1 and textbox1:

.TextButtons {
position: relative;
border: none;

border-radius: 4px;
width: 130%;
height: 30px;

font-family: Calibri;
font-size: 120%;

font-weight: bold;

opacity: 0.6;
border: 1px solid #888;
background-color: #888;
margin-bottom: 2px;

-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;

width: 115%;

border: 1px solid;
border-color: orange;
opacity: 1;

#Backtb1 {
position: absolute;

width: 130%;
color: white;
#Backtb1:focus {
background-color: orange;

I am trying to call the Backtb1 events after textbox1 gets focus.
So, the Backtb1 should get the opacity to 1 after I click the textbox1.

how can this be done? just on css or should I use jquery or javascript?

EDIT: since Vishal Kumar Sahu wanted full page code. this is it:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Dope.Login" %>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
<link href="assets/CSS/LoginStylesheet.css" rel="stylesheet" />
<link href="assets/fontawesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/fontawesome/css/font-awesome.min.css" rel="stylesheet" />

<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];

function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];

function startTimer() {
setInterval(displayNextImage, 7000);

document.addEventListener("DOMContentLoaded", function (event) {

var images = [], x = -1;
images[0] = "assets/Images/Image1.jpg";
images[1] = "assets/Images/Image2.jpg";
images[2] = "assets/Images/Image3.jpg";
images[3] = "assets/Images/Image4.jpg";

$("#textbox1").focus(function () {
$('#Backtb1').css("opacity", "1");


<form id="form1" runat="server">
<div id="CenterContents" onload = "changeImage()">
<%-- write everything here --%>
<%-- backgroundimage --%>
<img id="img" src="assets/Images/Image3.jpg">

<div id="Shadows">


<div id="CenterPanel">
<div id="wot">

<div id="Backtb1">
<i class="fa fa-envelope" id="envelope" aria-hidden="true"></i>
<asp:TextBox ID="TextBox1" CssClass="TextButtons" runat="server" placeholder="Username" ></asp:TextBox>

<asp:TextBox ID="TextBox2" CssClass="TextButtons" runat="server" placeholder="Password"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Button" />

<%-- dont write anything lower than this --%>

Answer Source

It is possible with CSS-only using the ":focus hack" when you switch the position of the textbox and the backtb1-div in the html code. Because you set an absolute position to backtb1 this should be a possible solution for you.

Run the code snippet and you'll see the backtb1 appearing and disappearing when the textbox gains/loses focus:

#backtb1 {
    display: none;
    background-color: red;
    color: white;
    border-radius: 7px;
    max-width: 100px;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    margin: 4px 0 0 0;
#textbox1:focus ~ #backtb1 {
    display: block;
<input type="text" id="textbox1">
<div id="backtb1">
    <i class="fa fa-envelope" id="envelope" aria-hidden="true">Test</i>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download