Sencha Touch 2: how to remove right arrow of datepickerfield by using css?

Question

I'm curious how to remove the right arrow of the datepickerfield in Sencha Touch 2 by using applying css style.

That's the source code on the page of the datepicker:

<div class="x-component-outer" id="ext-element-126">
    <div class="x-unsized x-field-input sencha-clear-icon" id="ext-input-2">
        <input class="x-input-el x-input-text x-form-field datepicker-input" type="text" id="ext-element-129" name="mydate" placeholder="Select your date">
        <div class="x-field-mask" style="" id="ext-element-130">
        </div>
        <div class="x-clear-icon" id="ext-element-131">
        </div>
    </div>
</div>

Just added: The only applied personal css style for all inputs, including datepickerfield on the page:

input{
    border:3px solid #555;
    border-radius: 15px;
}

This border doesn't look great in the area around the arrow. Looks like it goes behind the standard select arrow of the datepickerfield.

Answer 1

Try adding this:

.x-field-select .x-component-outer:after {
    background-color: white;
}