How can I customize the appearance of these HTML5 validations? When used in my web application, they currently look like this:
https://i.sstatic.net/M4snC.png
There is no margin or padding above the text. Is there a way to adjust this styling issue?
How can I customize the appearance of these HTML5 validations? When used in my web application, they currently look like this:
https://i.sstatic.net/M4snC.png
There is no margin or padding above the text. Is there a way to adjust this styling issue?
Here is a handy tip. Unfortunately, it's not possible to directly style validation popups using CSS.
// A solution to disable native validation UI with `noValidate`
// Perform evaluation on form submit and prevent submission if necessary
const form = document.querySelector('form')
form.noValidate = true
form.onsubmit = evt => {
if (!form.checkValidity()) {
evt.preventDefault()
}
}
// Loop through fields in the form
for (const field of form.querySelectorAll('input, textarea, select')) {
// Add error container
field.insertAdjacentHTML('afterend', '<div class="error"></div>')
// Display error message on `invalid` event
field.oninvalid = () => {
field.classList.add('invalid')
field.nextSibling.textContent = field.validationMessage
// Remove invalid state & error message on `input` event, trigger validation check
const inputHandler = () => {
field.oninput = null
field.nextSibling.textContent = ''
field.classList.remove('invalid')
field.checkValidity()
}
field.oninput = inputHandler
}
}/* Custom global styles */
html {
height: 100%;
}
body {
font-family: sans-serif;
font-weight: 300;
font-size: 20px;
background: linear-gradient(to top, #e0e7ef, #eef2f7);
min-height: 100%;
color: #798594;
line-height: 1.6;
}
/* Custom form styles */
form {
background: #f8fafb;
padding: 3em 1em;
border-radius: 3px;
box-shadow: 0 0.1em 0.4em #b7ccde;
max-width: 15em;
margin: 2em auto;
}
button, input, textarea, select {
font: inherit;
color: inherit;
padding: 0.4em 0.6em;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
margin-bottom: 0.5em;
}
button {
cursor: pointer;
background-color: #e9f1ff;
color: #7e93b7;
}
input {
display: block;
position: relative;
z-index: 1;
}
input::placeholder {
color: #bbb;
}
/* Styling for errors */
.invalid {
box-shadow: 0 0.15em 0.15em -0.1em rgba(4, 4, 4, 0.1);
}
.error {
display: none;
margin-bottom: 0.5rem;
margin-top: calc(-0.5rem - 4px);
margin-left: 2px;
margin-right: 2px;
padding: calc(0.5rem + 4px) 0.6rem;
background-color: #ffefeb;
color: #b75a41;
border: 1px solid #e6917a;
border-radius: 0 0 4px 4px;
animation: show-error 0.3s;
font-size: 0.8em;
}
.invalid + .error {
display: block;
}
@keyframes show-error {
from {
transform: translateY(-2em) scaleY(0.2);
}
to {
transform: none;
}
}<form>
<input
type="number"
placeholder="Enter 42"
min="42"
max="42"
required>
<input
type="email"
placeholder="Enter your email"
required>
<button type="submit">Register</button>
</form>I am trying to customize my sign-in box to only occupy 8 columns out of the available Bootstrap grid. Here's the code snippet I have so far: <div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 tile"> However, the output is ...
Is there a way to generate a table of contents when printing HTML to PDF using TCPDF? Here is an example code snippet: $html = '<h1>Hello</h1> How are you? <h2>Answer</h2> I am well, thanks'; // ... etc. Long HTML documen ...
As I work on creating my personal website, I have encountered an issue with three elements that are supposed to be side-by-side. My desired structure is depicted in this link: https://i.sstatic.net/eQEf3.jpg However, the middle element is not responding t ...
I am looking for a way to scroll the contents of my table horizontally while keeping the table structure fixed. Currently, when I try to scroll, the table structure scrolls along with the content, resulting in visibility issues at both ends due to the corn ...
I'm currently working on developing a snake game. My focus right now is figuring out how to make the body parts of the snake follow the head and be positioned after it. <!--Player--> <div class="snake"></div> So here we have the sn ...
Embedding an iframe of an appointment scheduling frontend on my page has been a challenge. While the width is correct, the height of the frame is too small. Despite attempting various CSS modifications, I have not been able to achieve the desired result. I ...
In the HTML page, I have two sets of a and p elements that are initially set to display:none. At the bottom of the page, there is a function being called with their respective ID's and values, which will enable one of them based on certain conditions ...
I've been attempting to insert an image using the <img> tag on CodeSandbox.io. However, each time I try to do so, it fails to display and defaults to the alt tag (Shows Mountain). The goal is to load an image from the same folder as the file th ...
Is it possible to apply styles like this in CSS? .bordered { border: 10px dashed yellow; } form input { use .bordered; font-size: 10px; } Alternatively, how can I achieve this without directly embedding each CSS code block in the HTML ele ...
After implementing the code snippet provided, I noticed that no alert message is being displayed when non-numeric values are entered into the Zipcode field. Can someone please help me troubleshoot this issue? $("input:text[name='address_1[zip]&apos ...
Hey there, I'm currently working on implementing a floating placeholder for an input field. However, I'm facing an issue where I don't want to set the placeholder with a background color due to the varying input backgrounds and styles in my ...
I am looking for a way to create a button (ADD) that, when clicked, generates a form with a field and a delete button. The form fields and the delete button should be erased when the button is clicked. <button type="button" class="btn btn ...
I currently have Django's Blog APP set up and running smoothly. However, I am facing an issue where I need to input posts (via admin) with HTML in the post content field. Currently, the text area only accepts plain text and does not render HTML. Belo ...
A critical element in the table "ContentPlaceHolder1_gvChannelList" is Pagination, located at the last row. I need to determine how many pages/columns are present in this pagination table. The code driver.findElements(By.id("//*[@id='ContentPlaceHold ...
I have several lists with a flex layout. Each column contains 3 list items, and the flex-basis is set to one-third. Within each li element, there is a div for a background image and another div to display text, which should be positioned below the image. ...
I'm really struggling to understand the purpose behind using $fix-mqs in the mentioned link: Although I can grasp how the rest of the mixin functions, this particular part has me stumped. In a project where I've utilized this pattern, everything ...
I want to dynamically hide divs that do not contain the text I specify. Here is the code I have tried: var $searchBox = $('#search-weeazer'); $searchBox.on('input', function() { var scope = this; var $userDivs = $('.infor ...
I tried incorporating the following code into my website: $('.feed-item').append('<p> This is paragraph element. </p>'); You can view it on this page: Test Unfortunately, the code does not seem to be functioning properly. ...
I have a very straightforward Sass function that converts a pixel value to a rem value: @function to-rem($pxval) { @return #{$pxval / $base-font-size}rem; } For example, using to-rem(24) would output 1.5rem. However, I recently ran into an issue whe ...
I have been struggling to adjust the width of my dropdown list box on my page. Despite my efforts, I cannot seem to make it bigger. Here is the code snippet causing me trouble: <div class="form-group row"> <div class="col-sm-1&quo ...