我是编程的新手，但是试图编写一段css并陷入对元素的淡化效果。
我试图更改我的wordpress网站上的订阅小部件（右上角），以便它的样式看起来像下面的搜索小部件。
http://magmamachine.co.uk/blog
我试图让输入字段的背景在用户选择时淡出不同的颜色。 - 就像下面的搜索字段一样。
到目前为止，我有这个：.sky-form-orange .input:hover input{
background-color: #f5b093 !important;
}
这会改变对悬停的影响。
是否可以在选择时将其更改为淡入淡出而不悬停？
问候 麦克
答案 0 :(得分：0)
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结构，但它应该给你一些想法！
答案 1 :(得分：0)
我认为你可以使用CSS3过渡： 您将从以下链接学习如何使用它： CSS3 Transition
答案 2 :(得分：0)
使用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>
答案 3 :(得分：-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">
<script type="text/javascript">document.documentElement.className = document.documentElement.className + ' yes-js js_active js'</script>
<style>
.wishlist_table .add_to_cart, a.add_to_wishlist.button.alt { border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; } </style>
<script type="text/javascript">
var yith_wcwl_plugin_ajax_web_url = 'http://www.magmamachine.co.uk/wp-admin/admin-ajax.php';
</script>
<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/">
<script type="text/javascript">
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"}};
!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);
</script><script src="http://www.magmamachine.co.uk/wp-includes/js/wp-emoji-release.min.js?ver=4.2.2" type="text/javascript"></script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
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&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&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&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&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">
<script type="text/javascript">
jQuery(document).ready(function() {
// CUSTOM AJAX CONTENT LOADING FUNCTION
var ajaxRevslider = function(obj) {
// obj.type : Post Type
// obj.id : ID of Content to Load
// obj.aspectratio : The Aspect Ratio of the Container / Media
// obj.selector : The Container Selector where the Content of Ajax will be injected. It is done via the Essential Grid on Return of Content
var content = "";
data = {};
data.action = 'revslider_ajax_call_front';
data.client_action = 'get_slider_html';
data.token = 'fb1a3202b0';
data.type = obj.type;
data.id = obj.id;
data.aspectratio = obj.aspectratio;
// SYNC AJAX REQUEST
jQuery.ajax({
type:"post",
url:"http://www.magmamachine.co.uk/wp-admin/admin-ajax.php",
dataType: 'json',
data:data,
async:false,
success: function(ret, textStatus, XMLHttpRequest) {
if(ret.success == true)
content = ret.data;
},
error: function(e) {
console.log(e);
}
});
// FIRST RETURN THE CONTENT WHEN IT IS LOADED !!
return content;
};
// CUSTOM AJAX FUNCTION TO REMOVE THE SLIDER
var ajaxRemoveRevslider = function(obj) {
return jQuery(obj.selector+" .rev_slider").revkill();
};
// EXTEND THE AJAX CONTENT LOADING TYPES WITH TYPE AND FUNCTION
var extendessential = setInterval(function() {
if (jQuery.fn.tpessential != undefined) {
clearInterval(extendessential);
if(typeof(jQuery.fn.tpessential.defaults) !== 'undefined') {
jQuery.fn.tpessential.defaults.ajaxTypes.push({type:"revslider",func:ajaxRevslider,killfunc:ajaxRemoveRevslider,openAnimationSpeed:0.3});
// type: Name of the Post to load via Ajax into the Essential Grid Ajax Container
// func: the Function Name which is Called once the Item with the Post Type has been clicked
// killfunc: function to kill in case the Ajax Window going to be removed (before Remove function !
// openAnimationSpeed: how quick the Ajax Content window should be animated (default is 0.3)
}
}
},30);
});
</script>
<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]>
<style type="text/css">
..mega_main_menu,
..mega_main_menu *
{
filter: none;
}
</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>
<noscript><style> .wpb_animate_when_almost_visible { opacity: 1; }</style></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>
答案 4 :(得分：-1)
我认为你想要的是CSS :focus选择器：
.sky-form-orange .input:focus input{
background-color: #f5b093 !important;
}