Цветовой оттенок CSS по выбору

Я новичок в программировании, но пытаюсь написать кусок css и застревать с эффектом затухания на элементе.Цветовой оттенок CSS по выбору

Я пытаюсь изменить виджет подписки (вверху справа) на моем сайте Wordpress так, чтобы он был похож на виджет поиска под ним.

http://magmamachine.co.uk/blog

Я пытаюсь получить на фоне моих полей ввода исчезать другой цвет, когда пользователь выбирает их. - как и поле поиска, показано ниже.

до сих пор у меня есть это:

.sky-form-orange .input:hover input{ 
background-color: #f5b093 !important; 
}

Какие изменения эффекта на парении.

Можно ли изменить это, чтобы исчезнуть, если выбрано, и не наведите указатель мыши?

С уважением Майк

источник

2015-07-17 whatevermike

Я думаю, что вы ищете свойства перехода: https://css-tricks.com/almanac/properties/t/transition/ – maja

Ваш вопрос становится еще лучше, если вы добавьте к нему соответствующие элементы 'HTML'. См. Http://stackoverflow.com/help/mcve – Wavemaster

С background-color и transition вы получаете эффект плавного выцветания.

Я добавил границу, чтобы продемонстрировать, что переход работает с несколькими значениями.

.sky-form-orange .input input { 
 
    border: 1px solid black; 
 
    background-color: #ccc; 
 
    transition: all 1s ease; 
 
} 
 
.sky-form-orange .input input:focus { 
 
    border-color: red; 
 
    background-color: #f5b093; 
 
    outline: none; 
 
}

<div class="sky-form-orange"> 
 
    <div class="input"> 
 
    <input type="text"> 
 
    </div> 
 
</div>

источник

2015-07-17 12:23:19 Wavemaster

Кто-то объясняет нижний предел? – Wavemaster

-1

Используйте фокус и упростить ваш CSS немного что-то вроде этого, если это возможно:

.sky-form-orange input:focus { 
 
    background-color: #f5b093 !important; 
 
}

<head> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=10"> 
 
<title>Blog – Magma Machine - Graphic and Digital Design</title> 
 
<link rel="profile" href="http://gmpg.org/xfn/11"> 
 
<link rel="pingback" href="http://www.magmamachine.co.uk/xmlrpc.php"> 
 

 
\t \t \t \t <script type="text/javascript">document.documentElement.className = document.documentElement.className + ' yes-js js_active js'</script> 
 
\t \t \t \t \t \t <style> 
 
\t \t \t \t .wishlist_table .add_to_cart, a.add_to_wishlist.button.alt { border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; } \t \t \t </style> 
 
\t \t \t <script type="text/javascript"> 
 
\t \t \t \t var yith_wcwl_plugin_ajax_web_url = 'http://www.magmamachine.co.uk/wp-admin/admin-ajax.php'; 
 
\t \t \t </script> 
 
\t \t <link rel="alternate" type="application/rss+xml" title="Magma Machine » Feed" href="http://www.magmamachine.co.uk/feed/"> 
 
<link rel="alternate" type="application/rss+xml" title="Magma Machine » Comments Feed" href="http://www.magmamachine.co.uk/comments/feed/"> 
 
\t 
 
\t \t <script type="text/javascript"> 
 
\t \t \t window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/www.magmamachine.co.uk\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}}; 
 
\t \t \t !function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings); 
 
\t \t </script><script src="http://www.magmamachine.co.uk/wp-includes/js/wp-emoji-release.min.js?ver=4.2.2" type="text/javascript"></script> 
 
\t \t <style type="text/css"> 
 
img.wp-smiley, 
 
img.emoji { 
 
\t display: inline !important; 
 
\t border: none !important; 
 
\t box-shadow: none !important; 
 
\t height: 1em !important; 
 
\t width: 1em !important; 
 
\t margin: 0 .07em !important; 
 
\t vertical-align: -0.1em !important; 
 
\t background: none !important; 
 
\t padding: 0 !important; 
 
} 
 
</style> 
 
<link rel="stylesheet" id="mmpm_mega_main_menu-css" href="http://www.magmamachine.co.uk/wp-content/plugins/mega_main_menu/src/css/cache.skin.css?ver=4.2.2" type="text/css" media="all"> 
 
<link rel="stylesheet" id="chimpy-css" href="http://www.magmamachine.co.uk/wp-content/plugins/chimpy/assets/css/style-frontend.css?ver=2.1.3" type="text/css" media="all"> 
 
<link rel="stylesheet" id="chimpy-font-awesome-css" href="http://www.magmamachine.co.uk/wp-content/plugins/chimpy/assets/css/font-awesome/css/font-awesome.min.css?ver=4.0.3" type="text/css" media="all"> 
 
<link rel="stylesheet" id="chimpy-sky-forms-style-css" href="http://www.magmamachine.co.uk/wp-content/plugins/chimpy/assets/forms/css/sky-forms.css?ver=2.1.3" type="text/css" media="all"> 
 
<link rel="stylesheet" id="chimpy-sky-forms-color-schemes-css" href="http://www.magmamachine.co.uk/wp-content/plugins/chimpy/assets/forms/css/sky-forms-color-schemes.css?ver=2.1.3" type="text/css" media="all"> 
 
<link rel="stylesheet" id="sb_instagram_styles-css" href="http://www.magmamachine.co.uk/wp-content/plugins/instagram-feed/css/sb-instagram.css?ver=1.3.7" type="text/css" media="all"> 
 
<link rel="stylesheet" id="sb_instagram_icons-css" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?1&amp;ver=4.2.0" type="text/css" media="all"> 
 
<link rel="stylesheet" id="rs-plugin-settings-css" href="http://www.magmamachine.co.uk/wp-content/plugins/revslider/rs-plugin/css/settings.css?ver=4.6.5" type="text/css" media="all"> 
 
<style id="rs-plugin-settings-inline-css" type="text/css"> 
 
.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902} 
 
</style> 
 
<link rel="stylesheet" id="woocommerce_prettyPhoto_css-css" href="//www.magmamachine.co.uk/wp-content/plugins/woocommerce/assets/css/prettyPhoto.css?ver=4.2.2" type="text/css" media="all"> 
 
<link rel="stylesheet" id="jquery-selectBox-css" href="http://www.magmamachine.co.uk/wp-content/plugins/yith-woocommerce-wishlist/assets/css/jquery.selectBox.css?ver=4.2.2" type="text/css" media="all"> 
 
<link rel="stylesheet" id="yith-wcwl-main-css" href="http://www.magmamachine.co.uk/wp-content/plugins/yith-woocommerce-wishlist/assets/css/style.css?ver=4.2.2" type="text/css" media="all"> 
 
<link rel="stylesheet" id="yith-wcwl-font-awesome-css" href="http://www.magmamachine.co.uk/wp-content/plugins/yith-woocommerce-wishlist/assets/css/font-awesome.min.css?ver=4.2.2" type="text/css" media="all"> 
 
<link rel="stylesheet" id="js_composer_front-css" href="http://www.magmamachine.co.uk/wp-content/plugins/js_composer/assets/css/js_composer.css?ver=4.5.3" type="text/css" media="all"> 
 
<link rel="stylesheet" id="magnific-popup-css" href="http://www.magmamachine.co.uk/wp-content/plugins/elite-addons-vc/assets/libs/magnific-popup/magnific-popup.min.css?ver=0.9.9" type="text/css" media="all"> 
 
<link rel="stylesheet" id="iv-oswald-webfont-css" href="http://fonts.googleapis.com/css?family=Oswald%3A400%2C700&amp;ver=1" type="text/css" media="all"> 
 
<link rel="stylesheet" id="iv-roboto-cond-webfont-css" href="http://fonts.googleapis.com/css?family=Roboto+Condensed%3A400%2C700&amp;ver=1" type="text/css" media="all"> 
 
<link rel="stylesheet" id="ivan-font-awesome-css" href="http://www.magmamachine.co.uk/wp-content/themes/october/css/libs/font-awesome-css/font-awesome.min.css?ver=4.1.0" type="text/css" media="all"> 
 
<link rel="stylesheet" id="ivan-elegant-icons-css" href="http://www.magmamachine.co.uk/wp-content/themes/october/css/libs/elegant-icons/elegant-icons.min.css?ver=1.0" type="text/css" media="all"> 
 
<link rel="stylesheet" id="ivan_owl_carousel-css" href="http://www.magmamachine.co.uk/wp-content/themes/october/css/libs/owl-carousel/owl.carousel.min.css?ver=4.2.2" type="text/css" media="all"> 
 
<link rel="stylesheet" id="ivan-theme-styles-css" href="http://www.magmamachine.co.uk/wp-content/themes/october/css/theme-styles.min.css?ver=1" type="text/css" media="all"> 
 
<link rel="stylesheet" id="ivan-default-style-css" href="http://www.magmamachine.co.uk/wp-content/themes/october/style.css?ver=4.2.2" type="text/css" media="all"> 
 
<!--[if IE]> 
 
<link rel='stylesheet' id='ie-ivan-theme-styles-css' href='http://www.magmamachine.co.uk/wp-content/themes/october/css/ie.css' type='text/css' media='all' /> 
 
<![endif]--> 
 
<link rel="stylesheet" id="redux-google-fonts-iv_aries-css" href="http://fonts.googleapis.com/css?family=Roboto+Condensed%3A400&amp;ver=4.2.2" type="text/css" media="all"> 
 
<link rel="stylesheet" id="woocommerce-layout-css" href="http://www.magmamachine.co.uk/wp-content/themes/october/css/woocommerce/css/woocommerce-layout.css?ver=2.3.13" type="text/css" media="all"> 
 
<link rel="stylesheet" id="woocommerce-smallscreen-css" href="http://www.magmamachine.co.uk/wp-content/themes/october/css/woocommerce/css/woocommerce-smallscreen.css?ver=2.3.13" type="text/css" media="only screen and (max-width: 768px)"> 
 
<link rel="stylesheet" id="woocommerce-general-css" href="http://www.magmamachine.co.uk/wp-content/themes/october/css/woocommerce/css/woocommerce.css?ver=2.3.13" type="text/css" media="all"> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-includes/js/jquery/jquery.js?ver=1.11.2"></script> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-content/themes/october/plugins/login-with-ajax/login-with-ajax.js?ver=4.2.2"></script> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-content/plugins/chimpy/assets/js/chimpy-frontend.js?ver=2.1.3"></script> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-content/plugins/chimpy/assets/forms/js/jquery.form.min.js?ver=20130711"></script> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-content/plugins/chimpy/assets/forms/js/jquery.validate.min.js?ver=1.11.0"></script> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-content/plugins/chimpy/assets/forms/js/jquery.maskedinput.min.js?ver=1.3.1"></script> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?ver=4.6.5"></script> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.5"></script> 
 
<script type="text/javascript"> 
 
/* <![CDATA[ */ 
 
var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","i18n_view_cart":"View Basket","cart_url":"","is_cart":"","cart_redirect_after_add":"no"}; 
 
/* ]]> */ 
 
</script> 
 
<script type="text/javascript" src="//www.magmamachine.co.uk/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=2.3.13"></script> 
 
<script type="text/javascript" src="http://www.magmamachine.co.uk/wp-content/plugins/js_composer/assets/js/vendors/woocommerce-add-to-cart.js?ver=4.5.3"></script> 
 
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.magmamachine.co.uk/xmlrpc.php?rsd"> 
 
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.magmamachine.co.uk/wp-includes/wlwmanifest.xml"> 
 
<meta name="generator" content="WordPress 4.2.2"> 
 
<meta name="generator" content="WooCommerce 2.3.13"> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t jQuery(document).ready(function() { 
 
\t \t \t \t // CUSTOM AJAX CONTENT LOADING FUNCTION 
 
\t \t \t \t var ajaxRevslider = function(obj) { 
 
\t \t \t \t 
 
\t \t \t \t \t // obj.type : Post Type 
 
\t \t \t \t \t // obj.id : ID of Content to Load 
 
\t \t \t \t \t // obj.aspectratio : The Aspect Ratio of the Container/Media 
 
\t \t \t \t \t // obj.selector : The Container Selector where the Content of Ajax will be injected. It is done via the Essential Grid on Return of Content 
 
\t \t \t \t \t 
 
\t \t \t \t \t var content = ""; 
 

 
\t \t \t \t \t data = {}; 
 
\t \t \t \t \t 
 
\t \t \t \t \t data.action = 'revslider_ajax_call_front'; 
 
\t \t \t \t \t data.client_action = 'get_slider_html'; 
 
\t \t \t \t \t data.token = 'fb1a3202b0'; 
 
\t \t \t \t \t data.type = obj.type; 
 
\t \t \t \t \t data.id = obj.id; 
 
\t \t \t \t \t data.aspectratio = obj.aspectratio; 
 
\t \t \t \t \t 
 
\t \t \t \t \t // SYNC AJAX REQUEST 
 
\t \t \t \t \t jQuery.ajax({ 
 
\t \t \t \t \t \t type:"post", 
 
\t \t \t \t \t \t url:"http://www.magmamachine.co.uk/wp-admin/admin-ajax.php", 
 
\t \t \t \t \t \t dataType: 'json', 
 
\t \t \t \t \t \t data:data, 
 
\t \t \t \t \t \t async:false, 
 
\t \t \t \t \t \t success: function(ret, textStatus, XMLHttpRequest) { 
 
\t \t \t \t \t \t \t if(ret.success == true) 
 
\t \t \t \t \t \t \t \t content = ret.data; \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t error: function(e) { 
 
\t \t \t \t \t \t \t console.log(e); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t 
 
\t \t \t \t \t // FIRST RETURN THE CONTENT WHEN IT IS LOADED !! 
 
\t \t \t \t \t return content; \t \t \t \t \t \t 
 
\t \t \t \t }; 
 
\t \t \t \t 
 
\t \t \t \t // CUSTOM AJAX FUNCTION TO REMOVE THE SLIDER 
 
\t \t \t \t var ajaxRemoveRevslider = function(obj) { 
 
\t \t \t \t \t return jQuery(obj.selector+" .rev_slider").revkill(); 
 
\t \t \t \t }; 
 

 
\t \t \t \t // EXTEND THE AJAX CONTENT LOADING TYPES WITH TYPE AND FUNCTION 
 
\t \t \t \t var extendessential = setInterval(function() { 
 
\t \t \t \t \t if (jQuery.fn.tpessential != undefined) { 
 
\t \t \t \t \t \t clearInterval(extendessential); 
 
\t \t \t \t \t \t if(typeof(jQuery.fn.tpessential.defaults) !== 'undefined') { 
 
\t \t \t \t \t \t \t jQuery.fn.tpessential.defaults.ajaxTypes.push({type:"revslider",func:ajaxRevslider,killfunc:ajaxRemoveRevslider,openAnimationSpeed:0.3}); 
 
\t \t \t \t \t \t \t // type: Name of the Post to load via Ajax into the Essential Grid Ajax Container 
 
\t \t \t \t \t \t \t // func: the Function Name which is Called once the Item with the Post Type has been clicked 
 
\t \t \t \t \t \t \t // killfunc: function to kill in case the Ajax Window going to be removed (before Remove function ! 
 
\t \t \t \t \t \t \t // openAnimationSpeed: how quick the Ajax Content window should be animated (default is 0.3) 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t },30); 
 
\t \t \t }); 
 
\t \t </script> 
 
\t \t \t <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style> 
 
<meta name="generator" content="Powered by Visual Composer - drag and drop page builder for WordPress."> 
 
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="http://www.magmamachine.co.uk/wp-content/plugins/js_composer/assets/css/vc-ie8.css" media="screen"><![endif]--> 
 
<!--[if gte IE 9]> 
 
\t <style type="text/css"> 
 
\t \t ..mega_main_menu, 
 
\t \t ..mega_main_menu * 
 
\t \t { 
 
\t \t \t filter: none; 
 
\t \t } 
 
\t </style> 
 
<![endif]--> 
 

 
<!-- BEGIN Typekit Fonts for WordPress --> 
 
<script type="text/javascript" src="//use.typekit.net/prl6byj.js"></script> 
 
<style type="text/css">.tk-proxima-nova{font-family:"proxima-nova",sans-serif;}</style><link rel="stylesheet" href="http://use.typekit.net/c/22bbac/1w;proxima-nova,7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191,gbm:V:i4,gbt:V:i7,gbl:V:n4,gbs:V:n7/d?3bb2a6e53c9684ffdc9a9aff1b5b2a6276adde0ff798449a3bfbdbf9b6f1614fe7f047719e422580edd9d4512a6f131617d729a1e2861c6f1d559f758f16e5f4f033898b8bfbc0aca15c145112888b3d2a478ead4718a4e9956bc4" media="all"><script type="text/javascript">try{Typekit.load();}catch(e){}</script> 
 
<!-- END Typekit Fonts for WordPress --> 
 

 
<style type="text/css" title="dynamic-css" class="options-output">.iv-layout.header{margin-top:30px;}#iv-layout-title-wrapper{border-top-width:1px;border-top-color:#f7f7f7;border-bottom-color:#f7f7f7;}#iv-layout-title-wrapper h2{font-family:Roboto Condensed;letter-spacing:-2px;font-weight:400;font-size:50px;}.iv-layout.bottom-footer{background-color:#303030;}</style><style type="text/css"></style><style type="text/css"></style><style type="text/css"></style>         <style type="text/css"> 
 
            </style> 
 
\t <noscript>&lt;style&gt; .wpb_animate_when_almost_visible { opacity: 1; }&lt;/style&gt;</noscript></head> 
 

 
<aside id="chimpy_form-3" class="widget widget_chimpy_form"> 
 
    <form id="chimpy_widget_1" class="chimpy_signup_form sky-form sky-form-orange chimpy_custom_css" novalidate="novalidate"> 
 
    <input type="hidden" name="chimpy_widget_subscribe[form]" value="1"> 
 
    <input type="hidden" id="chimpy_form_context" name="chimpy_widget_subscribe[context]" value="widget"> 
 
    <header>Join our mailing list</header> 
 
    <div class="chimpy_status_underlay"> 
 
     <fieldset> 
 
     <div class="description">blog updates and exclusive offers for members</div> 
 
     <section> 
 
      <label class="input"><i class="icon-append fa-user"></i> 
 
      <input type="text" id="chimpy_widget_field_FNAME" name="chimpy_widget_subscribe[custom][FNAME]" placeholder="First Name ..."> 
 
      </label> 
 
     </section> 
 
     <section> 
 
      <label class="input"><i class="icon-append fa-user"></i> 
 
      <input type="text" id="chimpy_widget_field_LNAME" name="chimpy_widget_subscribe[custom][LNAME]" placeholder="Last Name ..."> 
 
      </label> 
 
     </section> 
 
     <section> 
 
      <label class="input"><i class="icon-append fa-envelope-o"></i> 
 
      <input type="text" id="chimpy_widget_field_EMAIL" name="chimpy_widget_subscribe[custom][EMAIL]" placeholder="Email Address ..."> 
 
      </label> 
 
     </section> 
 
     </fieldset> 
 
     <div id="chimpy_signup_widget_processing" class="chimpy_signup_processing" style="display: none;"></div> 
 
     <div id="chimpy_signup_widget_error" class="chimpy_signup_error" style="display: none;"> 
 
     <div></div> 
 
     </div> 
 
     <div id="chimpy_signup_widget_success" class="chimpy_signup_success" style="display: none;"> 
 
     <div></div> 
 
     </div> 
 
    </div> 
 
    <footer> 
 
     <button type="button" id="chimpy_widget_submit" class="button">sign me up</button> 
 
    </footer> 
 
    </form> 
 
    <script type="text/javascript"> 
 
    jQuery(function() { 
 
     jQuery("#chimpy_widget_1").validate({ 
 
     rules: { 
 
      "chimpy_widget_subscribe[custom][FNAME]": { 
 
      "required": false, 
 
      "maxlength": 200 
 
      }, 
 
      "chimpy_widget_subscribe[custom][LNAME]": { 
 
      "required": false, 
 
      "maxlength": 200 
 
      }, 
 
      "chimpy_widget_subscribe[custom][EMAIL]": { 
 
      "required": true, 
 
      "maxlength": 200, 
 
      "email": true 
 
      } 
 
     }, 
 
     messages: { 
 
      "chimpy_widget_subscribe[custom][FNAME]": [], 
 
      "chimpy_widget_subscribe[custom][LNAME]": [], 
 
      "chimpy_widget_subscribe[custom][EMAIL]": { 
 
      "required": "Please enter a value", 
 
      "email": "Invalid format" 
 
      } 
 
     }, 
 
     errorPlacement: function(error, element) { 
 
      error.insertAfter(element.parent()); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 
</aside>

источник

2015-07-17 12:13:25 DCdaz

@Wavemaster html отлично относится к его коду как к его сайту. – DCdaz

@ Wavemaster на самом деле это не так, просто не было бы всех соответствующих css.результат все равно будет таким же. – DCdaz

@Wavemaster Прекратите использовать комментарии для упрямых дебатов. – DCdaz

focus это селектор CSS для входов, которые являются активными.

Попробуйте использовать :focus в качестве селектора для вашего ввода:

.sky-form-orange .input input:focus { 
 
     background-color: #f5b093; 
 
    }

<div class="sky-form-orange"> 
 
    <div class="input"> 
 
    <input type="text"> 
 
    </div> 
 
</div>

... хотя я не уверен, как в HTML-структуру, но она должна дать вам некоторое представление!

источник

2015-07-17 12:13:26 Ben

-1

Я думаю, что вы хотите, это CSS :focus селектор:

.sky-form-orange .input:focus input{ 
    background-color: #f5b093 !important; 
}

это имеет больше деталей: http://www.w3schools.com/cssref/sel_focus.asp

источник

2015-07-17 12:13:56 Matthew

проголосовать за ссылку на w3schools также ответ уже был отправлен –

Я думаю, что вы можете использовать переход CSS3: вы узнаете, как использовать его из ссылки сильфона : CSS3 Transition

источник

2015-07-17 12:17:01 PKa

Первый правильный ответ. Следующая ссылка также объясняет это очень хорошо: https://css-tricks.com/almanac/properties/t/transition/ – maja

Цветовой оттенок CSS по выбору

ответ

Смежные вопросы