可用于Email的CSS3 五星评价界面组件

CSS3 Star rating for email 在Email中不能使用脚本。

CSS3，五星

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1915
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* Star hover using lang hack in its own style wrapper, otherwise Gmail will strip it out */
    
    * [lang~="star-wrapper"]:hover *[lang~="star-number"] {
        color: #119da2 !important;
        border-color: #119da2 !important;
    }
    * [lang~="star-wrapper"]:hover *[lang~="full-star"],
    * [lang~="star-wrapper"]:hover ~ *[lang~="star-wrapper"] *[lang~="full-star"] {
        display: block !important;
        width: auto !important;
        overflow: visible !important;
        float: none !important;
        margin-top: -1px !important;
    }
    * [lang~="star-wrapper"]:hover *[lang~="empty-star"],
    * [lang~="star-wrapper"]:hover ~ *[lang~="star-wrapper"] *[lang~="empty-star"] {
        display: block !important;
        width: 0 !important;
        overflow: hidden !important;
        float: left !important;
        height: 0 !important;
    }
    </style> <style type="text/css">
    /* Normal email CSS */
    
    @-ms-viewport {
        width: device-width;
    }
    body {
        margin: 0;
        padding: 0;
        ri min-width: 100%;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    td {
        vertical-align: top;
    }
    img {
        border: 0;
        -ms-interpolation-mode: bicubic;
        max-width: 100% !important;
        height: auto;
    }
    a {
        text-decoration: none;
        color: #119da2;
    }
    a:hover {
        text-decoration: underline;
    }
    *[class=main-wrapper],
    *[class=main-content] {
        min-width: 0 !important;
        width: 600px !important;
        margin: 0 auto !important;
    }
    *[class=rating] {
        unicode-bidi: bidi-override;
        direction: rtl;
    }
    *[class=rating] > *[class=star] {
        display: inline-block;
        position: relative;
        text-decoration: none;
    }
    @media (max-width: 621px) {
        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
        }
        table {
            min-width: 0 !important;
            width: 100% !important;
        }
        *[class=body-copy] {
            padding: 0 10px !important;
        }
        *[class=main-wrapper],
        *[class=main-content] {
            min-width: 0 !important;
            width: 320px !important;
            margin: 0 auto !important;
        }
        *[class=ms-sixhundred-table] {
            width: 100% !important;
            display: block !important;
            float: left !important;
            clear: both !important;
        }
        *[class=content-padding] {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
        *[class=bottom-padding] {
            margin-bottom: 15px !important;
            font-size: 0 !important;
            line-height: 0 !important;
        }
        *[class=top-padding] {
            display: none !important;
        }
        *[class=hide-mobile] {
            display: none !important;
        }
        /* Prevent hover effects so double click issue doesn't happen on mobile devices */
        
        * [lang~="star-wrapper"]:hover *[lang~="star-number"] {
            color: #AEAEAE !important;
            border-color: #FFFFFF !important;
        }
        * [lang~="star-wrapper"] {
            pointer-events: none !important;
        }
        * [lang~="star-divbox"] {
            pointer-events: auto !important;
        }
        *[class=rating] *[class="star-wrapper"] a div:nth-child(2),
        *[class=rating] *[class="star-wrapper"]:hover a div:nth-child(2),
        *[class=rating] *[class="star-wrapper"] ~ *[class="star-wrapper"] a div:nth-child(2) {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
            float: left !important;
        }
        *[class=rating] *[class="star-wrapper"] a div:nth-child(1),
        *[class=rating] *[class="star-wrapper"]:hover a div:nth-child(1),
        *[class=rating] *[class="star-wrapper"] ~ *[class="star-wrapper"] a div:nth-child(1) {
            display: block !important;
            width: auto !important;
            overflow: visible !important;
            float: none !important;
        }
    }

HTML

<div style="margin: 0;color: #60666d;font-size: 50px;font-family: sans-serif;line-height: 20px; text-align: left;">
                                                                            <div class="bottom-padding" style="margin-bottom: 0px; line-height: 15px; font-size: 15px;">&nbsp;</div>
                                                                            <div style="text-align: center; margin: 0; font-size: 10px;  text-transform: uppercase; letter-spacing: .5px;">Rating (select a star amount):</div>
                                                                            <div class="bottom-padding" style="margin-bottom: 0px; line-height: 7px; font-size: 7px;">&nbsp;</div>
                                                                            <div style="width: 100%; text-align: center; float: left;">
                                                                                <div class="rating" style="text-align: center; margin: 0; font-size: 50px; width: 275px; margin: 0 auto; margin-top: 10px;">

</div>
                                                                            </div>
                                                                            <div style="margin-bottom: 0px; line-height: 30px; font-size: 30px;">&nbsp;</div>
                                                                        </div>

</div>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                </center>
            </td>
        </tr>
    </tbody>
</table>

CSS3 Star rating for email 在Email中不能使用脚本。

CSS3，五星

编辑器支持Emmet

快捷键

CSS3 Star rating for email 在Email中不能使用脚本。

CSS3，五星

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：