dede联动类别样式如何自定义与调用？

{dede:channeltype typeid='0' name='typeid'/}

修改后，添加 class 或直接内联 style：

方式 A：添加自定义 Class（推荐）

{dede:channeltype typeid='0' name='typeid' class='我的自定义样式类名'/}

你在 CSS 文件中定义 .我的自定义样式类名 即可。

方式 B：直接内联样式（不推荐，用于快速测试）

{dede:channeltype typeid='0' name='typeid' style='width: 150px; border: 2px solid red;'/}

这种方式会将样式直接写在 HTML 标签里，不利于维护，仅适用于临时调试。

步骤 2：在 CSS 文件中定义样式

与方法一类似,在你的 CSS 文件中为你刚刚添加的 class 定义样式。

/* 仅应用于特定位置的联动类别 */
.我的自定义样式类名 {
    width: 150px;
    border: 2px solid #ff6a00;
    background-color: #fffbe6;
}

优点：

• 灵活：可以针对不同位置设置不同的样式。
• 非侵入：不修改核心文件，升级无忧。

缺点：

• 需要重复定义：如果多个地方需要相同的特殊样式，就需要在每个标签上都加上 class 属性。

完整示例：实现一个美观的联动类别

假设我们要在文章发布页面实现一个“省-市-县”三级联动，并给它们加上统一的现代化样式。

修改核心文件（全局样式）

编辑 /include/typelink.class.php，在 GetOptionList 方法中找到 <select> 标签，添加 class。

// 在 typelink.class.php 中
$s .= "<select name='$fieldname' id='$fieldname' class='联动-select'>\r\n";

添加 CSS 样式

在你的模板 CSS 文件（/templets/default/style/dedecms.css）中添加以下样式：

/* 联动类别容器，用于布局 */
.form-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.form-group label {
    margin-right: 10px;
    font-weight: bold;
    min-width: 60px;
}
/* 联动下拉框的样式 */
.联动-select {
    width: 150px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.联动-select:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
/* 为联动组添加间距，让它们不挤在一起 */
.联动-select + .联动-select {
    margin-left: 10px;
}

在模板文件中调用

在你的模板文件（如 article_add.htm）中，这样调用联动类别：

<div class="form-group">
    <label>文章栏目：</label>
    {dede:channeltype typeid='0' name='typeid'}
</div>

最终效果就是三个整齐、美观且具有交互效果的下拉框。

对于大多数情况,推荐使用方法一（修改核心文件），因为它能确保整个网站的联动类别风格一致，如果只是少数页面需要特殊样式，再结合使用方法二。