There is some problem when using other css on the input button

[Jan]

I tried to use the purecss/uikit framework with jeasyui in my project.
However,when I wrote input field with class "easyui-textbox" or "easyui-numberbox",the display will look  strange.
But when using "easyui-validatebox",it's OK.

Is there any confict in the CSS?
I hope that I can use the standard form field but still can validate these input field by using jeasyui.

Thanks,hope it can be fixed soon.

Jan

[jarry]

Please show an example or a link page to demonstrate your issue.

[Jan]

For example,import  easyui,
then import purecss,<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
The following is sample code:

<form class="pure-form">
    <fieldset>
        <legend>A compact inline form</legend>

        <input type="email" class="easyui-textbox" placeholder="Email">
        <input type="password" class="easyui-textbox" placeholder="Password">

        <label for="remember">
            <input id="remember" type="checkbox"> Remember me
        </label>

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

Please take a look,the display looks very strange.

In total,most time,the input item will only behave as easyui's style,and ignore other css unless I wrote the style in it.
External css will not take effect on the page item.

Please advise.

[jarry]

Please remove the 'pure-form' class attribute from your <form>, or set the 'box-sizing' CSS style to 'border-box' for all the elements.

Code:

<style>
	*{
		box-sizing:border-box;
	}
</style>

[Jan]

Thank you for your reply.

However,the method you provided cannot resovle the key issue.

Sometimes I want to use my own css(External CSS).Even I added "box-sizing:border-box;",the input item will still behave as jeasyui wants it to be.
It means whatever CSS I wrote,it makes no sense.

Is it possible that when I use my own css,it works as I want to.And,still I can use the "class='easyui-numberbox','class='easyui-datebox' ",and so I can use it to validate some input.

By the way,input field with "easyui-validatebox"  works as I want it to be.I don't know why?
And if I wrote the css on the input item itself,it works too.

In fact,if "class='easyui-numberbox' and 'class='easyui-datebox''' work,most of my problems will be resolved.

Looking forward to see your response.
Jan

[jarry]

The textbox component and its inherited components have their own style except validatebox. If you want to change the textbox's appearance, you can override the '.textbox' or '.textbox-text' CSS.

Code:

<style>
.pure-form .textbox .textbox-text{
  box-sizing:content-box;
}
</style>

[Jan]

Although your advise cannot resolve my issue,thank you all the same.
I checked the chrome F12,and found jeasyui do some operation when page is loading.
For example,"input" with class "easyui-textbox,easyui-filebox" will be set "display:none",and a new "span" and "input" element will be added behind.
I don't why jeasyui does this,but it should be reasonable in its own idea.

But if jeasyui can do some following modfication,it would be more useful for us.
For example,
<input type="text" class="easyui-textbox other-css"/>
And if "input" can use the "other-css" style,then more and more projects will use it,I believe.

Jeasyui is strong enough on HTML element,while still a little poor on HTML layout.
Maybe we can get some idea from  bootstrap,UIkit,semantic-ui,and to make it better and better.

Thank you.