Member Avatar for sureronald

Hello everyone.
I am working on a php project and when reporting errors to the user on the page with the form, I explain to him the error and also change the css formatting of the text input field with the error so that the border of the input field colors are changed to red.
It works perfectly but I would like to maintain the smooth rounded edges of the default text input box since when the formatting is applied the input box simply becomes a rectange with 90 degree edges.
Thanks

  • 3 Contributors
  • 3 Replies
  • 97 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

@ sureronald — the behavior you described is exactly what was hinting at: when you override an input's border you also need to reapply the corner styling the browser gave by default. Rather than injecting inline styles for the border, move the error look into a CSS class that preserves or re-declares the rounded corners and adds a non-destructive highlight (box-shadow or outline). 's request for code is valid — a small, central stylesheet keeps things consistent and easier to maintain.

A practical pattern:

  • Create a dedicated error class that sets border-radius and a subtle box-shadow so the control stays rounded and visually consistent across browsers.
  • Add that class to the input when validation fails (server-side or client-side), instead of replacing the whole input chrome with inline styles.
  • Use aria-invalid="true" and aria-describedby to make the error accessible to screen readers.

Example CSS (place in your stylesheet):

.input-error {
  border: 1px solid #c00;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: 0 0 3px rgba(204,0,0,0.35);
  background-clip: padding-box;
}
.input-error:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(204,0,0,0.45);
}

And the input simply receives the class when invalid:

<input type="text" id="reg_no" name="reg_no" class="input-error" />

Troubleshooting: if corners still look square, inspect computed styles in devtools to find an overriding rule (inline styles trump classes). On some legacy UIs you may need vendor-prefixed properties or to reset -webkit-appearance. For client-side validation consider the :invalid pseudo-class as an alternative.

For implementation details and browser behavior on border-radius and box-shadow, see the MDN references: border-radius and box-shadow.

Recommended Answers

All 3 Replies

Member Avatar for aashishn86

post the code please..

Member Avatar for sureronald

Heres the code

<input type="text" name="reg_no"  <?php if(isset($_SESSION['err']['reg_no']))
{
echo "value=\"$_SESSION['err']['reg_no']\" style=\"border: 1px solid red;\"";
}
?>
/>

The session variable $_SESSION is only set if validation script reports an error

Member Avatar for MidiMagic

You are going to have to repeat whatever action makes your rounded corners after the message appears.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.