sobakava Posted May 1, 2015 Share Posted May 1, 2015 I have tried to add glow effect (made by box shadow) but I couldn't get it work then the editbox becomes active. This is the CSS in my CustomCSS.strings array. glowing { /* round the corners */ border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } glowing:focus { outline:none; border: 1px solid #4195fc; /* create a BIG glow */ box-shadow: 0px 0px 14px #4195fc; -moz-box-shadow: 0px 0px 14px #4195fc; -webkit-box-shadow: 0px 0px 14px #4195fc; } and this is the EditBox's ExtEvents: function added(sender, container, pos, eOpts) { sender.addCls('glowing'); } when I click in the editbox and even after start typing, nothing happens. I have tried to play with focus event in Extevents but still couldn't manage it to work. It seems the ":focus" is not working. Because I have tried to put glowing state CSS code directly into glowing class as following and the editbox appears as glowing effect as expected. glowing { /*glowing!*/ outline:none; border: 1px solid #4195fc; /* create a BIG glow */ box-shadow: 0px 0px 14px #4195fc; -moz-box-shadow: 0px 0px 14px #4195fc; -webkit-box-shadow: 0px 0px 14px #4195fc; } glowing:focus { /*same as above*/ outline:none; border: 1px solid #4195fc; /* create a BIG glow */ box-shadow: 0px 0px 14px #4195fc; -moz-box-shadow: 0px 0px 14px #4195fc; -webkit-box-shadow: 0px 0px 14px #4195fc; } So, how could I implement this glowing effect when the editbox receives focus? Ps. I have also tried to Uniedit1.setfocus; at onenter event desperately. the :active state seems working but only while the mouse key is kept pressed down on the Editbox. '.glowing-border:active {' 'outline:none;' 'border: 1px solid #4195fc;' '/* create a BIG glow */' 'box-shadow: 0px 0px 20px #41c5fc;' '-moz-box-shadow: 0px 0px 20px #41c5fc;' '-webkit-box-shadow: 0px 0px 20px #41c5fc;' '}' Isn't an Edixbox implemented as "input" element in Unigui? Link to comment Share on other sites More sharing options...
molla2005b Posted May 1, 2015 Share Posted May 1, 2015 mybe if u shoud add a dot before "glowing {..}" ==> ".glowing {..}" http://forums.unigui.com/index.php?/topic/3804-text-boxes-with-background-image-help/?hl=sender.addcls Link to comment Share on other sites More sharing options...
sobakava Posted May 2, 2015 Author Share Posted May 2, 2015 I already did that. As I mentioned, the glow CSS code works if I set it to default, the problem it is not working with "focus" state. CustomCSS.Strings = ( '.glowing-border {' '/* round the corners */' 'border-radius: 4px;' '-moz-border-radius: 4px;' '-webkit-border-radius: 4px;' '}' '.glowing-borders {' 'outline:none;' 'border: 1px solid #4195fc;' '/* create a BIG glow */' 'box-shadow: 0px 0px 20px #41c5fc;' '-moz-box-shadow: 0px 0px 20px #41c5fc;' '-webkit-box-shadow: 0px 0px 20px #41c5fc;' '}' ) Link to comment Share on other sites More sharing options...
sobakava Posted June 4, 2015 Author Share Posted June 4, 2015 any comments, ideas? Link to comment Share on other sites More sharing options...
Sherzod Posted June 4, 2015 Share Posted June 4, 2015 Hi, Maybe this approach?: sender.addCls('glowing'); CustomCSS: input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); } https://css-tricks.com/snippets/css/glowing-blue-input-highlights/ Best regards. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now