Click here to view the image It would be great to have the text "text name" displayed on the border of the input box.
Here is the HTML code -
<input type="text"
id="text creator"
class="form-control" placeholder="text creator"
name="object-creator"/>
The text "text creator" should be visible on the border.
It's unclear what you mean by "on the border", so here are two possible solutions that may fit your needs.
If you want the text to be placed "on the border" of a fieldset, you can use a legend within the fieldset:
<fieldset>
<legend>text creator</legend>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
</fieldset>
https://jsfiddle.net/jafarian/n5ocxpod/
Alternatively, if you simply want the text to appear above the input field, you can use a label:
<label for="text creator">text creator</label><br>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
http://jsfiddle.net/jafarian/hjv74tdw/106/
Upon reviewing comments, here's an updated version that still uses labels but positions them to overlap the input field border with a higher z-index. Ensure your background colors are coordinated: https://jsfiddle.net/jafarian/04493rbu/
My website is a Blog/News site featuring posts that contain HTML content stored in the database. In addition to posts, I also want to include elements like sliders which cannot be generated using v-html. I explored Vue's Render Functions to find a so ...
Is there a way to divide my page into 4 sections with data from a database source? Currently, I am displaying the data from the database in a single table, but I would like to split it into four parts, each showing different results from the database. Ad ...
Below is a form I am working with: this.changePasswordForm = this.formBuilder.group({ 'passwordNew': ['', ValidationService.passwordValidator], matchingPasswords('passwordNew', 'passwordNewConfirmation')(this) ...
I have embedded a table with a "plus" font awesome icon. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorig ...
Check out this example to see the issue with the horizontal rule not extending all the way across under the number. I've tried using list-style-position:inside;, but that interferes with positioning the number correctly due to the left image being flo ...
I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS. Code : <style> table, tr, td, t ...
I'm having trouble ensuring that my chatbox's scrollbar automatically starts at the bottom so that new messages are visible without needing to scroll down. The current code I have in JQuery is not achieving this desired behavior. $('#chatbo ...
Can someone please help me create a hover effect for areas in maps? Below is the code for the map. Thank you in advance! Here is the image. <img src="[CR_kraje_1_úroveň_v1] (imported)" width="770" height="443" border="0" usemap="#map" /> &l ...
How can I switch between allowing character and numeric input in a textbox? I currently have a JQuery function that restricts input to numbers only $('.numeric').on('input', function (event) { this.value = this.value.replace(/[^0 ...
I'm currently working on creating a Navbar and implementing the navbar highlighting feature using the active bootstrap class. Below is the code I have tried: <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap CSS ...
Within a parent element, I have a div that allows for horizontal scrolling. Using CSS and jQuery, the content can overflow horizontally with white space no wrap. Setting a fixed width for the div works well, but my responsive website requires a dynamic wid ...
Exploring CSS has led me to a peculiar issue where transform:rotate is not functioning as expected. Here is an instance of the animation not triggering: jsFiddle CSS .close { width:100px; height:100px; background:#00f; ...
Have a question regarding the integration of chart.js in an Angular 11 environment. I am working with 2 charts. AppComponent.html: <div class="col-sm"> <canvas id="bl" ></canvas> </div> <div class="col ...
Recently, I updated @angular/router to version 3.0.0-alpha.3 and noticed that the OnActivate interface, which was present in version 2.0.0-rc.1, seems to be missing. Any clues on this change would be greatly appreciated. ...
My website is www.adventureswithross.com When the device width is larger than 601px, I have specific requirements: I need the menu and custom header to be seamlessly connected without any spacing in between. To address the issue of space above the custo ...
I'm looking to incorporate these imports into my angular 4 app.module, rather than adding them directly to my index file. In app.module.ts -> import d3 from "d3"; console.log(d3) // Confirming successful import of D3 import nvd3 from "nvd3"; H ...
I'm facing an issue with scrolling to a specific component on the same page when a navbar item is clicked. Each component has a min-height of 100vh and there is a navbar at the top. I attempted using ViewPortScroller in the main component, but it does ...
At the moment, I am in the process of building a responsive website. The issue I am currently facing is that the layout for the responsive design (which was created by someone else and not me) has a fixed width of 745px. Obviously, this width does not acco ...
WooCommerce widgets are great, but I'm struggling to customize the styling. Can anyone lend a hand? ...
I am a newcomer to Foundation 4, but I have some coding experience. Currently, I am in the process of transitioning my photography blog (www.momentaryawe.com/blog) from Wordpress with a custom theme to a custom theme built on Foundation 4. Most aspects of ...