Anyway Change the Cursor "Vertical Line" Instead of a Box

anyway change the cursor vertical line instead of a box?

I don't think making the cursor a vertical line is possible in xterm. It is possible, however, to make it underlined. Just run xterm -uc.

It might be possible to do what you want using another terminal emulator. For example, I use Konsole and I can set the cursor shape to "Block", "I-Beam" and "Underline".

Setting the cursor to a vertical thin line in vim

This did the trick:

set guicursor=i:ver25-iCursor

I had to reduce the 100 to 25

How to get resize type of cursor when hovering on the border of the box?

Here, try this with a wrapping DIV that has the CSS for the hover.

.border {  background-color: red;  cursor: e-resize;  padding: 5px;}
.contents {  background-color: white;  cursor: default;  height: 100px;  line-height: 100px;  text-align: center;}

<div class="border"><div class="contents">  Hello World</div></div>

Making the emacs cursor into a line

Add this to your .emacs file:

(setq-default cursor-type 'bar)

How to create a vertical line on top of the text when it is active?

It looks like you're using Bootstrap? If so, the majority of the CSS may not work. The example below has Bootstrap 5 loaded, and your custom CSS was too complex to follow so I had to remove it (BS styles would inhibit most of it anyway), and the following CSS was added:

    .active {
      position: relative
    }
    
    .active::before {
      content: '|';
      position: absolute;
      left: calc(50% - 0.25ch);
      top: -1ch;
      color: tomato;
    }

This style will appear whenever a link is assigned .active. If the | is too tall, try decreasing font-size directly on the .active::before selector -- use Dev Tools to find the computed font-size of .active::before to get an idea of how much you should decrease it by. Also, I changed some of the BS classes according to BS suggested use.

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .active {
      position: relative
    }
    
    .active::before {
      content: '|';
      position: absolute;
      left: calc(50% - 0.25ch);
      top: -1ch;
      color: tomato;
    }
  </style>
</head>

<body>
  <main class="container">
    <section class="row">
      <nav class="col">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a href="#home" class="nav-link active">one</a>
          </li>
          <li class="nav-item">
            <a href="#about" class="nav-link">two</a>
          </li>
          <li class="nav-item">
            <a href="#service" class="nav-link">three</a>
          </li>
          <li class="nav-item">
            <a href="#promotion" class="nav-link">four</a>
          </li>
          <li class="nav-item">
            <a href="#customer" class="nav-link">five</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">six</a>
          </li>
        </ul>
      </nav>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

Align cursor to placeholder starting position

You can use text-indent property.

input.form-control {
  box-sizing: border-box;
  width: 100%;
  text-indent: 30px;
}

jsFiddle

Or just set some padding-left for it.

input.form-control {
  box-sizing: border-box;
  width: 100%;
  padding-left: 30px;
}

jsFiddle

Anyway Change the Cursor "Vertical Line" Instead of a Box