As a beginner in Html and Css, I am exploring how to position the text "Your Comment" at the top of an input field.
https://prnt.sc/1k74619
<div class="comment">
<input placeholder="Your Comment" type="text" />
</div>
.comment input {
width: 680px;
height: 169;
border: 0;
padding-left: 20px;
font-family: 'Montserrat';
outline-color: #b5b5b5;
margin-top: 30px;
margin-left: -115px;
}
<INPUT> tag is used for single line text, while the
<TEXTAREA></TEXTAREA>*{
box-sizing: border-box;
}
.comment input,
.comment textarea{
font-family: 'Montserrat', Arial;
width: 100%;
max-width: 680px;
padding: 20px;
border: 1px solid #b5b5b5;
outline: none;
border-radius: 8px;
margin-bottom: 10px;
}
.comment textarea{
height: 169px;
}
.comment input:focus,
.comment textarea:focus{
border: 1px solid #32babe;
box-shadow: 0 0 0 2px #32babe;
}<div class="comment">
<input type="text" placeholder="Your Commnet - in single line">
<textarea placeholder="Your Comment - in multi lines"></textarea>
</div>It might not be possible to accomplish this, but if you require a larger multi-line text input area, you could consider using the
<textarea></textarea>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
If you want to replicate the same effect, you could experiment with placing the input field within a bordered <div> like demonstrated in this example:
Here is a way to achieve this:
textarea {
font-size: .8rem;
letter-spacing: 1px;
}
textarea {
padding: 10px;
max-width: 100%;
line-height: 1.5;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #999;
}<textarea id="story" name="story"
rows="5" cols="33">
Your comment
</textarea>One effective way to enhance your form design is by utilizing Bootstrap's floating label feature. This feature is designed to provide a sleek and modern look to your form fields.
Follow these steps to implement the floating label:
<div class="form-floating">
<input type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
.custom-field{
position: relative;
margin-top: 50px;
}
.comment input, .comment textarea {
font-family: 'Montserrat', Arial;
width: 100%;
max-width: 680px;
padding: 20px;
border: 1px solid #b5b5b5;
outline: none;
border-radius: 8px;
margin-bottom: 0;
}
.placeholder {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.custom-field input:focus + .placeholder {
top: -20px;
}<div class="custom-field">
<input id="email-field" type="email">
<label for="email-field" class="placeholder">Enter Email</label>
</div>I have a basic typeahead setup for searching city names. However, upon selecting a city, I also need to retrieve its latitude and longitude in order to send that data to the backend. $('.typeahead').typeahead({ minLength : 3, source : ...
I'm encountering a dilemma in my Rails app where I need to assign a value to a custom data-* attribute for an anchor tag. The issue is that hashes can't contain hyphens, leading to difficulties with this code: <%= link_to 'Example', ...
My custom form is displayed below: <form novalidate class="form-group" ng-hide="tab==1"> Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum" /> Min Price: <input type="numbe ...
As a student, is it more beneficial to focus on utilizing pure JavaScript & CSS or frameworks? And which approach is best suited for the professional field? ...
Within my VueJS project, I am faced with nested elements that are generated dynamically like this: <container> <outerElement class="outer" v-for="obj in objects"> <innerElement class="inner" v-for="el ...
I have a straightforward sign-up form for a mailing list. It sends the user's email address to a store-address.php file using jQuery's ajax object to make the request and receive a response. The issue I'm facing is that I'm not receivi ...
Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...
I've been attempting to embed a Swiper JS carousel within a Bootstrap 4 col class div, but the carousel refuses to stay inside the designated col container. Here's a visual representation of what I'm aiming for: https://i.sstatic.net/lgicC. ...
It would be great if bootstrap had a built-in feature where it automatically assigns the wrapper div of any item with a height based on the height of the largest div. In this example on JSFiddle, you can see that I have different heights for the video-ite ...
I've encountered an issue with using @media in the style tags of a VueJS component. Surprisingly, styling within the @media query works consistently, while applying styles based on width rules does not seem to have any effect. <template> &l ...
My goal is to have one link that retrieves data from a table with a specific value and another identical link that pulls data from the same table but with a different value. However, both dropdowns are displaying in the link. <div class="col-sm-9"> ...
This script changes colors when a row in a specific column is clicked: $(document).ready(function(){ $("#rowClick").children("tbody").children("tr").children("td").click(function(){ $(this.parentNode).toggleClass("enroute"); }); }); CSS: .placed{ b ...
I am currently dealing with two different arrays of objects. The first array contains a list of permissions groups, while the second array consists of user groups. My main goal is to compare the Group Owner (which is represented by ID 70) with the list of ...
Is there a way to efficiently replace all occurrences of <br> with a new line character (\n) in HTML using Jsoup? I'm looking for a clean solution that will result in the Element#text() outputting plain text without any HTML, but with &bsol ...
I am seeking assistance to successfully load a PHP file from a DIV call. Below is the code I have used: <html> <head> </head> <body> <script class="code" type="text/javascript"> $("#LoadPHP").load("fb_marketing ...
Can someone please help me with customizing the width of the input text box and drop down menu using this resource: https://developers.google.com/maps/documentation/javascript/places#places_autocomplete? I'm having trouble figuring it out. ...
In my Angular application, I am facing the task of adding a value to an array where the value itself needs to be in HTML format. This means that when the value is displayed, it should render as HTML text. For instance, if someone hovers over the text, I ...
I am attempting to retrieve the offset().top of an element <div class='profile'></div> located within a ngView controlled by app.js. However, I encounter an error in the console: Uncaught TypeError: Cannot read property 'top&a ...
I'm attempting to add a Gaussian blur effect to an element that contains some child nodes with content. In Chrome, I successfully applied the blur using the following style: -webkit-filter: blur(2px); Unfortunately, Firefox does not support thi ...
I am currently working on creating an image that can be clicked to cycle through different images all within the same frame. While I have managed to get it to work, I am facing a limitation where it only responds to one click. count = 1; function myF ...