# Style a TextIput

**URL:** <https://forums.fusetools.com/t/style-a-textiput/6713>\
**Category:** How-to Discussions\
**Created:** [February 18, 2016, 4:18pm UTC](https://forums.fusetools.com/t/style-a-textiput/6713 "2016-02-18T16:18:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![LimeInBox](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/limeinbox/32/211_2.png) [@LimeInBox](https://forums.fusetools.com/u/LimeInBox)\
**Post date:** [February 18, 2016, 4:18pm UTC](https://forums.fusetools.com/t/style-a-textiput/6713/1 "2016-02-18T16:18:28Z")

</div>

Hi,

I’d like to customise the text inputs in my app, for example remove the bottom stroke, how do I do this ?

---

<div class="post-metadata">

**Author:** ![LimeInBox](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/limeinbox/32/211_2.png) [@LimeInBox](https://forums.fusetools.com/u/LimeInBox)\
**Post date:** [February 22, 2016, 6:55am UTC](https://forums.fusetools.com/t/style-a-textiput/6713/2 "2016-02-22T06:55:07Z")

</div>

The best way I found is using “TextEdit” then create a Class from it.

Here is the basic style of TextInput as found here : [https://gist.github.com/kusma/f6094c3d55127c07fec2](https://gist.github.com/kusma/f6094c3d55127c07fec2)

```auto
    <TextInput
        ux:Name="_textInput"
        TextColor="0,0,0,1"
        Padding="0,0,0,16"
        Margin="8,8,8,8"
        FontSize="16"
        Font="RobotoRegular"
        >

        <Panel Layer="Background">
            <Rectangle Alignment="Bottom" Height="1" Margin="0,8,0,8" ux:Name="_dividerRect">
                <SolidColor ux:Name="_textInputDivider" Color="{Resource CLine}" />
            </Rectangle>
        </Panel>

        <ResourceBinding Target="_changeTextInputDividerFill1.Value" Key="C700" />
        <ResourceBinding Target="_changeTextInputDividerFill2.Value" Key="C700" />

        <WhileDisabled>
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInput.TextColor" Value="{Resource CLine}" />
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="{Resource CLine}" />
        </WhileDisabled>

        <WhileFocusWithin>
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="{Resource CFillFore}" ux:Name="_changeTextInputDividerFill1" />
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_dividerRect.Height" Value="2" />
        </WhileFocusWithin>

        <!-- do we really need this bit? -->
        <WhilePressed>
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="{Resource CFillFore}" ux:Name="_changeTextInputDividerFill2" />
            <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_dividerRect.Height" Value="2" />
        </WhilePressed>

        <WhileFalse ux:Name="_placeholderText">
            <Text Width="100%" Height="100%"
                  TextAlignment="{Property _textInput.TextAlignment}" TextWrapping="{Property _textInput.TextWrapping}"
                  LineSpacing="{Property _textInput.LineSpacing}"
                  Font="{Property _textInput.Font}" FontSize="{Property _textInput.FontSize}"
                  Value="{Property _textInput.PlaceholderText}" TextColor="{Property _textInput.PlaceholderColor}" />
        </WhileFalse>

        <WhileContainsText>
            <Change _placeholderText.Value="true" />
            <Nothing Duration="0.05" />
        </WhileContainsText>

    </TextInput>

```

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [February 22, 2016, 7:24am UTC](https://forums.fusetools.com/t/style-a-textiput/6713/3 "2016-02-22T07:24:56Z")

</div>

Yes, using `TextEdit` to create styled text inputs is the intended solution. `TextEdit` is meant to be a basic editor without any decoration (this also means no placeholder).