Issue
The intitial position of cursor is at center of the field. How to make it to top left?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body style="background-color: cadetblue; height:1000px">
<form>
<input type="text" class="notes-input" name="note">
</form>
</body>
</html>
.notes-input {
width: 50%;
line-height: 8em;
margin:50px 0px 0px 150px ;
}
Solution
You can use textarea instead of input
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<style>
.notes-input {
width: 50%;
margin:50px 0px 0px 150px ;
}
</style>
<body style="background-color: cadetblue; height:1000px">
<form>
<textarea type="text" rows="5" class="notes-input" name="note"></textarea>
</form>
</body>
</html>
if we want only input and box size should be big means we can use the below code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<style>
.notes-input {
width: 50%;
margin:50px 0px 0px 150px ;
padding-bottom:150px;
}
</style>
<body style="background-color: cadetblue; height:1000px">
<form>
<input type="text" class="notes-input" name="note">
</form>
</body>
</html>
Answered By - Nandeesh Kumar D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.