2

Is it possible to remove border-radius on <lightning:input/>?

Just attaching a css class with border-radius: 0; does not help.

1 Answer 1

4

Using SLDS's input component documentation, you can easily create your custom input box:

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
  <div class="slds-form-element__control">
    <input type="text" id="text-input-id-1" class="slds-input" placeholder="Placeholder Text" />
  </div>
</div>

versus using a lightning:input component, which in the end, renders to:

<lightning-input class="myClass" data-aura-rendered-by="17:0" lightning-input_input=""><div class="slds-form-element" lightning-input_input="">
    <label for="input-2" class="slds-form-element__label slds-no-flex" lightning-input_input="">ligthgning:input</label>
        <div class="slds-form-element__control slds-grow" lightning-input_input="">
            <input type="input" id="input-2" class="slds-input" lightning-input_input="">
        </div>
    </div>
</lightning-input>

Upside of using SLDS custom component:

  • granular control over styling
  • access to DOM (not in lightning namespace)
  • can use custom attributes

Upside of using lightning:component

  • includes SLDS styling
  • many build in functionalities

Downside of trying to customize a built in component (such as lightning input).

  • Custom CSS may break if changes are made to the component in future releases.

Hope this helps you make chose in between applying custom CSS rules to your lightning:input component vs using SLDS with HTML.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .