Customizing the in-built title bar border of input textbox

Question

Outline color of title in the input textbox is displaying differently in Google chrome. bottom border line is looking differently.

<input type="text" title="Please fill out this field.">

so i tried with following code:

<span class="pseudo-tooltip-wrapper" data-title="please fill out this field...">
<input type='text' required></span>

sample.css

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

[data-title]:after {
    content: attr(data-title);
    background-color: rgb(217, 235, 217);
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    /* box-shadow: 1px 1px 3px #222222; */
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}

[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

so now it's displaying like below. When i make the field as required the default title bar is displaying.

Instead of this approach can we fix the default title bar border.

Please find the code in stackbliz: https://stackblitz.com/edit/angular-pa2lnu

How to achieve this issue.

Possible duplicate of [HTML5 form required attribute. Set custom validation message?](https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message) — Morpheus, Nov 28 '19 at 09:58
can we override title bar border property in the input text box @Morpheus — AVINASH M, Nov 28 '19 at 11:30

score 0 · Answer 1 · answered Nov 28 '19 at 10:06

0

You can use angular material Input Form fields, they are simpler, comprehensive and decorative. Lt me know if you find [This Link] (https://material.angular.io/components/form-field/overview) helpful

answered Nov 28 '19 at 10:06

Mursalin Malik

57
1
12

I want to get the proper border for my input text box title bar which i have uploaded in the screenshot @MursalinMalik – AVINASH M Nov 28 '19 at 10:51
You mean you want a custom border for title text "Please fill out this field"? – Mursalin Malik Nov 28 '19 at 10:55
Yes, Please find my stackblitz link. I have tried some approach but that didn't work. @MursalinMalik – AVINASH M Nov 28 '19 at 10:59
Hope [This] (https://forum.webflow.com/t/how-to-style-please-fill-out-this-field-for-form/55023) can help – Mursalin Malik Nov 28 '19 at 11:35

score 0 · Answer 2 · answered Nov 28 '19 at 12:08

You can make a custom tooltip handler. See, I used tooltip and tooltiptext class for displaying custom title.

Stackblitz here

HTML

Hover over me 
  <br/>
  <br/>
<div class="tooltip">
  <span class="tooltiptext">Required field</span>
  <input  title="Please fill" type="text" />
</div>

CSS

 .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

By this approach also we are getting two title bars for input text-box. if we use the tool tip we display only one title bar, but we can't make the input box as mandatory field. Can we Override the default title bar border and display with different border. Because in Google Chrome the bottom border of title bar is displaying differently @SurjeetBhadauriya — AVINASH M, Nov 28 '19 at 12:41

Customizing the in-built title bar border of input textbox

2 Answers2