样式 Wordpress 登录小部件

Question

我正在尝试找到一种方法来为默认的 WP-login 小部件设置样式 CSS。但问题是，无论我使用的是选择器还是 class，最终我的效果都是 0。

我的目标是去除顶部、左侧和右侧的边框；所以只剩下底部（像下划线一样），并将 3 个字段彼此内联（用户名、密码、登录）。

有人知道可以做什么吗？

Link 到有问题的网站：dev.melliandshayne.com

登录位置: 目前我把它设置在页脚，这样更容易找到。不过，我会在某一时刻把它放在页面中间的某个地方。

当前主题：Ronneby Wordpress 主题

非常感谢！！

Answer 1

使用 firebug 或某种代码检查器检查元素，然后您将能够看到应用于元素的 class/id。

.widget.widget_crum_login form p.login-submit .button,
.widget.widget_crum_login form p.login-password input[type=password],
.widget.widget_crum_login form p.login-username input[type=text]{
  border: none;
  border-bottom: 1px solid #e0e0e0;
}
.widget.widget_crum_login form p.login-submit {
  width: 100%;
}

这将按要求将它们并排对齐...

p.login-submit, p.login-username, p.login-password {
    float: left;
    padding: 0 1em;
    width: 33% !important;
}
.widget.widget_crum_login form p.login-submit .button, .widget.widget_crum_login form p.login-password input[type="password"], .widget.widget_crum_login form p.login-username input[type="text"] {
    width: 100%;
}
.login-lost-password,
.login-remember {
    clear: left;
    text-align: center;
}

样式 Wordpress 登录小部件

Style Wordpress LOGIN widget

css

wordpress

login

widget