[CLOSED] bottom border color in textfield

Hi!

How can I remove the gray border from a textfield and only leave the bottom border blue?

I am using the Crisp theme

thanks

Hello @JCarlosF!

I have moved your second question to a separate, dedicated thread as it does not seem to be related to the first you asked here. Hope you don't mind, as this helps us keep different threads for different and unique topics, which makes it easier for us to handle it and also for future reference.

As for the problem in question, if you are using a text field and the Crisp theme, all you have to do is override the CSS rule governing the text field's input outline to whatever you need. The CSS class in question is x-form-trigger-wrap-default. You can inquire it just by using the browser developer tools' "inspect element" feature and highlight the part of the component you want in the generated HTML page (in the "DOM").

Assuming you want to override the style of a text field but not all input fields throughout the page, you can limit the custom style only to components you assign a specific CSS Class and then specify CSS rules they should govern that and only components pertaining that custom CSS class. We're going to call our custom class my-field-style for the example that follows.

You should add to the page this <style /> block (or maintain a .css file you include to the page):

Code:

---

<style>
    .my-field-style .x-form-trigger-wrap-default {
        border-style: none;
        border-bottom: solid;
        border-bottom-width: 1px;
        border-bottom-color: blue;
    }
</style>

---

Then specify the text field to belong to this CSS class:

Code:

---

<ext:TextField runat="server" FieldLabel="Styled Text input" EmptyText="Enter a value here." Cls="my-field-style" />

---

So that any other text field (or other field components sharing the same x-form-trigger-wrap-default CSS rule) would not be affected by this. As you may have suspected, by not specifying the custom CSS class in the style block, you would make all fields look like that in one single rule; so if that's your aim, you may just follow the simpler approach and code.

If that's not clear still, the following CSS rule block:

Code:

---

<style>
    .x-form-trigger-wrap-default {
        border-style: none;
        border-bottom: solid;
        border-bottom-width: 1px;
        border-bottom-color: blue;
    }
</style>

---

Will apply the custom style to any component that has an input field ruled by that styling class.

Hope this helps!

sorry I should have created another thread

Thank you very much Fabricio! with that I solved this case

Thanks for the feedback, glad it was what you needed!