我如何绕过WordPress登录页面的角落？

Question

我在我的WordPress网站中使用了自定义登录页面定制器插件，它制作了一个非常漂亮的插件页面。使用CSS我可以围绕我的徽标的角落，但我无法弄清楚如何舍入登录表单的角落。网站上的其他内容都有圆角。以下CSS是我尝试过的，但它不起作用。出于某种原因，只有边框规范行被包含在渲染页面的头部的CSS中，并且边框半径保持不变。 HTML由插件的设置创建。我在4周前在他们的支持论坛上问过这个问题，但没有得到答案。我希望这里有人能帮助我。谢谢。

CSS

/*-------------------------------------------------------------- 
7.1 Login form 
--------------------------------------------------------------*/ 

.login #login form#loginform { 
    border: 5px double #999 !important; 
    border-radius: 16px !important; 
} 

#login ul.square { 
    color: #fefdff !important; /*----Splashed white ----*/ 
    background-color: transparent; 
    margin: 0 0 0 22px; 
    padding: 0 0 0 22px; 
    } 

#login ul.square li { 
    color: #fefdff !important; /*----Splashed white ----*/ 
    background-color: transparent; 
    list-style: square outside !important; 
    margin: 0 0 0 10px; 
/* padding: 1em 0 0.3em -1em !important; */ 
    padding: 3px 5px !important; 
    } 

#login p#backtoblog a:link { 
    color: #2662ef; /* Bright blue */ 
    background-color: transparent; 
    font-size: 90%; 
    font-weight: 400; 
} 

#login p#backtoblog a:hover, #login p#backtoblog a:focus { 
    color:#ddff22; /* vivid yellow */ 
    background-color: transparent; 
    font-size: 90%; 
    font-weight: 400; 
} 

#loginform { 
    border-radius:16px; 
} 

#login .loginform { 
    border-radius:16px; 
} 

HTML

<div id="login"> 
     <h1><a href="https://botanical-art.baeecorp.org" title="Botanical Artists for Education &amp; the Environment (BAEE)" tabindex="-1">Botanical Artists for Education &amp; the Environment (BAEE)</a></h1> 

<form name="loginform" id="loginform" action="https://botanical-art.baeecorp.org/wp-login.php" method="post"> 
    <p> 
     <label for="user_login">Username or Email Address<br> 
     <input name="log" id="user_login" class="input" value="" size="20" type="text"></label> 
    </p> 
    <p> 
     <label for="user_pass">Password<br> 
     <input name="pwd" id="user_pass" class="input" value="" size="20" type="password"></label> 
    </p> 
     <p class="forgetmenot"><label for="rememberme"><input name="rememberme" id="rememberme" value="forever" type="checkbox"> Remember Me</label></p> 
    <p class="submit"> 
     <input name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" type="submit"> 
     <input name="redirect_to" value="https://botanical-art.baeecorp.org/wp-admin/" type="hidden"> 
     <input name="testcookie" value="1" type="hidden"> 
    </p> 
</form> 

Answer 1

我的答案发现我的问题是在自定义登录页面定制插件自定义设置。 CSS自定义插件必须放入插件的自定义CSS框中，而不是放在WordPress附加CSS面板中。我已经使用WordPress Customizer的额外CSS面板来尝试在这个问题的答案和评论中提出的几件事情，但他们不是解决方案。我还安装了一个额外的插件，做了很多很多事情，包括四舍五入的登录框（但这是我所需要的）。我决定我不想再添加一个胖插件来编辑一个插件。我删除了额外的插件并调查了自定义登录页面定制器插件的设置并找到了答案。

在WordPress定制器中，导航到“登录定制器”菜单。在Login Customizer菜单中，导航到Login Customizer菜单底部的“Other”菜单项。这个其他菜单项有一个自定义CSS框。我删除了一些新的CSS我会投入到那些没有工作的WordPress的定制的附加CSS面板，贴吧到在登录定制的其他菜单自定义CSS盒子：

form#loginform, form#lostpasswordform, form#resetpassform, form#registerform { 
    -moz-border-radius: 16px !important; 
    -webkit-border-radius: 16px !important; 
    -ms-border-radius: 16px !important; 
    -o-border-radius: 16px !important; 
    border-radius: 16px !important; 
    padding: 20px; 
    overflow: hidden; 
} 

dl.login-hello dt { 
    color: #fefdff !important; /*----Splashed white ----*/ 
    background-color: transparent; 
    font-size: 100%; 
    font-weight: normal; 
    margin: 0 0 0.4em 0; 
} 

dl.login-hello dd { 
    color: #fefdff !important; /*----Splashed white ----*/ 
    background-color: transparent; 
    font-size: 98%; 
    font-weight: normal; 
} 

dl dd:before { 
    content: " \2014 " ; 
    font-style: oblique; 
    margin: 0; 
    padding: 0; 
    } 

保存在自定义后登录定制器中的CSS，登录表单有圆角。

Answer 2

这是因为你没有给登录表单的背景颜色section.You可以试试这个:)

#loginform { 
    -moz-border-radius: 16px; 
    -webkit-border-radius: 16px; 
    -ms-border-radius: 16px; 
    -o-border-radius: 16px; 
    border-radius: 16px; 
    background-color: red; /* specify the color which u want to gave in bg */ 
    padding: 20px; 
} 

可能在wordpress中它并不是因为那个css覆盖在wordpress中，那么你可以使用我的更新代码，即

#loginform { 
-moz-border-radius: 16px!important; 
-webkit-border-radius: 16px!important; 
-ms-border-radius: 16px!important; 
-o-border-radius: 16px!important; 
border-radius: 16px!important; 
background-color: red; //specify the color which u want to gave in bg 
padding: 20px; 

}

如果仍然面临的问题，然后提供我住的网址，我会做的。

谢谢！

Answer 3

可以使用，