Question 11355 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Styling the html input to have round border – Jquery

I have a input box which using the x button to clear the filed. But with adding this addition attribute to the input box the border of the input has two styles now.

In the below image the input box right border is round where as left border is straight. How I can make the border style round for both side?

enter image description here

code:

<div class="input-group">
<div class="btn-group has-feedback has-clear">
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    <span id="searchclear3"
       class="glyphicon glyphicon-remove-circle form-control-feedback form-control-clear input-group-text"
       style="pointer-events:auto; text-decoration:none; cursor:pointer;"
       onclick="$(this).prev('input').val('');return false;">
    </span>
</div>
Tags:

2

Answers


  1. 0

    There are several ways:

    You can use the simplest css

    input {
  border-radius: 50px; /*If it doesn't work add !important*/
}

    Or a js code

    const input = document.querySelector('input');
input.style.borderRadius = '50px';

    Or you can use a bootstrap class that is already preset (I see you are using bootstrap 4)

    form-control-rounded

    In this way:

    <input type="text" class="form-control form-control-rounded" id="basic-url" aria-describedby="basic-addon3">
    Login or Signup to reply.
  2. 0

    Use the CSS property border-radius to style it.

    It has four values for each side, however, if only one value is passed, it will set it to the entire border.

    Therefore, the CSS should look similar to this:

    #form-control {
    border-radius: 10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search