[CLOSED] bottom border color in textfield

  1. #1

    [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
  2. #2
    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):

    <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:

    <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:

    <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!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    sorry I should have created another thread

    Thank you very much Fabricio! with that I solved this case
    Last edited by JCarlosF; Feb 23, 2021 at 6:12 PM.
  4. #4
    Thanks for the feedback, glad it was what you needed!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] How to setup ImageCommandColumn's border-bottom line?
    By capbarbell in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 06, 2013, 2:57 PM
  2. [CLOSED] Panel topBar bottom border of buttons .
    By supera in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 22, 2012, 11:44 AM
  3. [CLOSED] FieldSet - Bottom border-line missing on IE-8
    By ndotis in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 03, 2011, 6:04 PM
  4. [CLOSED] [1.0] ComboBox in IE6 - Bottom border not showing
    By danielg in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 17, 2010, 11:13 AM
  5. [CLOSED] How to remove the TabPanel header bottom border?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 12, 2010, 4:09 PM

Posting Permissions