Hai,

I have set the search input box.I want increase close(X) symbol size.

NOTE: When Close(X) symbol button size is increased,the text entered in the text field should not get increased.The text should be in default size


 So how should I keep text in the text field font size=12px and same the Close(X) symbol size=20px. Please suggest any solutions



Thanks,
Jeyasri

Hi Jeyasri,

According to my understanding you are using alphabet "x" instead of alphabet use icon and you can set the size of icon 

Regards,

Koushik

Koushik Prathi wrote:

Hi Jeyasri,

According to my understanding you are using alphabet "x" instead of alphabet use icon and you can set the size of icon 

Regards,

Koushik

Thanks for ur reply

I think you misunderstood. In Searchtext filed I want to set the icon size=20 and text(jeyasri) size=12. 



Thanks,

Jeyasri

#Search{

font-size:12px;

}

#Search::-webkit-search-cancel-button{

    font-size:20px;    

}


Sample Here : http://jsfiddle.net/tb16eu7w/

coder kamath wrote:

#Search{

font-size:12px;

}

#Search::-webkit-search-cancel-button{

    font-size:20px;    

}


Sample Here : http://jsfiddle.net/tb16eu7w/

Hai coder,

Its not working.. 

Thanks,
Jeyasri

Solution

JEYASRI R wrote:

coder kamath wrote:

#Search{

font-size:12px;

}

#Search::-webkit-search-cancel-button{

    font-size:20px;    

}


Sample Here : http://jsfiddle.net/tb16eu7w/

Hai coder,

Its not working.. 

Thanks,
Jeyasri

'#search' is a example you need to replace '#search' with the Id(Name) of your search field :) Did you check the Jsfiddle Link I gave. Is it working  ?


# represents Name and . represents class in CSS. 

Notice that Outsystem will give inbuilt name and ID for the fields, better to give some custom class and add the css to that class.


Try something like this.


<input id="Search" class="Searcher" type="search" placeholder="Search" />


.Searcher{

font-size:12px;

}

.Searcher::-webkit-search-cancel-button{
      font-size:12px;    
}


Solution

coder kamath wrote:

JEYASRI R wrote:

coder kamath wrote:

#Search{

font-size:12px;

}

#Search::-webkit-search-cancel-button{

    font-size:20px;    

}


Sample Here : http://jsfiddle.net/tb16eu7w/

Hai coder,

Its not working.. 

Thanks,
Jeyasri

'#search' is a example you need to replace '#search' with the Id(Name) of your search field :) Did you check the Jsfiddle Link I gave. Is it working  ?


# represents Name and . represents class in CSS. So maybe add a custom class and add the css to that class

Yeah, with outsystems you can't really put Id's in your CSS, because they are created on runtime (I wish they added SASS). To get around this, you can put in a static id, or just use a class (which I recommend).

Alternatively you can add an expression with <style> tags and use the id in there. But doing that will make things much more ugly.