Question

我正在设置chrome扩展程序，并建立了设置菜单，CSS和HTML正常工作。我在Codepen上使用了此按钮，它说我的代码没有错误如何定义函数？我现在已将jquery下载到该文件夹，并使用脚本来调用它，如此处所示，由于开发扩展程序存在一些安全限制，因此无法使用CDN。

$('button.cooldown').click(function(){
  var btn = $(this);
  btn.prop('disabled', true);
  setTimeout(function(){
    btn.prop('disabled', false);
  },15000);
});

body {
  background-image: linear-gradient( 72.5deg,  rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
  width: 250px;
  height: 400px;
}

#header {
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  background-color: #393e46;
  color: white;
  font-size: 15px;
  border-radius: 10px;
}




.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}

.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}

.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}

.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}




/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  font-size: 18px;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

  input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=file], select {
padding-left: 15%;
}

.form-item {
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
}

.wallpaper-title {
    display: block;
    padding-bottom: 3px;
    font-size: 11px;
}












button.cooldown {
  background: #336699;
  min-height: 48px;
  min-width: 144px;
  position: relative;
  margin: 5px;
  border-radius: 5px;
  border: 0;
  color: #fff;
  padding: 0 15px;
  font-size: 16px;
  outline: none;
  overflow: hidden;
  cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
  outline: none;
}
button.cooldown:disabled {
  background: #264d73;
  color: #d9d9d9;
  cursor: default;
  box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 5px;
  background: #1a334d;
  animation: cooldown 15s linear;
}
@keyframes cooldown {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
/* layout stuff */
section {
  text-align: center;
  margin-top: 100px;
  color: #333;
}
p {
  font-size: 12px;
}

<html>

<head>
  <title>Home+</title>
  <link rel="stylesheet" type="text/css" href="popup.css">
  <script src="popup.js"></script>



  <div id="header">
    <h2>Home+</h2>
    <h6>Settings</h6>
  </div>

</head>

<body>


  <!-- The settings pane, expand at will -->
  <div class="tab-pane" id="settings">
    <form class="settings">
      <div class="form-item">
        <label for="zip">Zip Code: </label>
        <div class="form-item">
          <input id="zip" name="zip" type="text" pattern="[0-9]*">
        </div>
      </div>

      <div class="form-item">
        <label class="container">Show Weather
          <input type="checkbox" checked="checked">
          <span class="checkmark"></span>
        </label>
      </div>



      <div class="form-item">
          <button class="cooldown">Refresh Weather</button>
      </div>



      <div class="form-item">
        <label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
        <center>
          <input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
        </center>
      </div>


      <div class="form-item">
        <button type="button" class="button">Save</button>
        <button type="button" class="button_cancel">Cancel</button>
      </div>

    </form>

  </div>

  </div>


</body>

</html>

Answer 1

您链接的CodePen具有jQuery作为外部库，您可以在JavaScript页上的“设置”下的“ CodePen”页上对其进行检查。

要使您的扩展程序正常工作，请将jQuery包含在扩展程序中。

一个工作示例，在此示例中，我在添加public partial class ebbxdbContext : IdentityDbContext<ApplicationUser> { public ebbxdbContext() { } public ebbxdbContext(DbContextOptions<ebbxdbContext> options) : base(options) { } public virtual DbSet<ActivityLog> ActivityLog { get; set; } public virtual DbSet<Addresses> Addresses { get; set; } public virtual DbSet<City> City { get; set; } public virtual DbSet<Customers> Customers { get; set; } public virtual DbSet<DeviceSetup> DeviceSetup { get; set; } public virtual DbSet<Devices> Devices { get; set; } public virtual DbSet<Districts> Districts { get; set; } public virtual DbSet<LanguageRes> LanguageRes { get; set; } public virtual DbSet<Nations> Nations { get; set; } public virtual DbSet<Partners> Partners { get; set; } public virtual DbSet<Products> Products { get; set; } public virtual DbSet<Provinces> Provinces { get; set; } public virtual DbSet<SubsRows> SubsRows { get; set; } public virtual DbSet<Subscriptions> Subscriptions { get; set; } public virtual new DbSet<Users> Users { get; set; } public virtual DbSet<WfmacroSteps> WfmacroSteps { get; set; } public virtual DbSet<Wfstates> Wfstates { get; set; } public virtual DbSet<Wfsteps> Wfsteps { get; set; } public virtual DbSet<Wftemplates> Wftemplates { get; set; } protected override void OnModelCreating(ModelBuilder modelBuilder) { base.OnModelCreating(modelBuilder); modelBuilder.HasAnnotation("ProductVersion", "2.2.4-servicing-10062"); modelBuilder.Entity<AspNetUserLogins>() .HasKey(c => new { c.LoginProvider, c.ProviderKey, c.UserId }); modelBuilder.Entity<AspNetUserRoles>() .HasKey(c => new { c.UserId, c.RoleId }); modelBuilder.Entity<ActivityLog>(entity => { entity.Property(e => e.ActivityLogId) .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.ActivityLogTypeId).HasColumnType("numeric(18, 0)"); entity.Property(e => e.Comment) .IsRequired() .HasMaxLength(500); entity.Property(e => e.CreatedOnUtc).HasColumnType("datetime"); entity.Property(e => e.IpAddress).HasMaxLength(200); entity.Property(e => e.UserId) .IsRequired() .HasMaxLength(500); }); modelBuilder.Entity<Addresses>(entity => { entity.HasKey(e => e.AddressId); entity.Property(e => e.AddressId) .HasColumnName("AddressID") .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.AddressUi) .HasColumnName("AddressUI") .HasDefaultValueSql("(newid())"); entity.Property(e => e.Building).HasMaxLength(50); entity.Property(e => e.City).HasMaxLength(100); entity.Property(e => e.CityId) .HasColumnName("CityID") .HasColumnType("numeric(18, 0)") .HasDefaultValueSql("((0))"); entity.Property(e => e.CustomerGivenName).HasMaxLength(50); entity.Property(e => e.CustomerId) .HasColumnName("CustomerID") .HasColumnType("numeric(18, 0)"); entity.Property(e => e.DistrictId) .HasColumnName("DistrictID") .HasColumnType("numeric(18, 0)") .HasDefaultValueSql("((0))"); entity.Property(e => e.Fed) .HasColumnName("FED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Feip) .HasColumnName("FEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Feu) .HasColumnName("FEU") .HasMaxLength(50); entity.Property(e => e.Floor).HasMaxLength(5); entity.Property(e => e.Idwfstate).HasColumnName("IDWFState"); entity.Property(e => e.Led) .HasColumnName("LED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Leip) .HasColumnName("LEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Leu) .HasColumnName("LEU") .HasMaxLength(50); entity.Property(e => e.Nation).HasMaxLength(5); entity.Property(e => e.NationId) .HasColumnName("NationID") .HasColumnType("numeric(18, 0)") .HasDefaultValueSql("((0))"); entity.Property(e => e.Notes).HasMaxLength(1000); entity.Property(e => e.Number).HasMaxLength(10); entity.Property(e => e.Province).HasMaxLength(10); entity.Property(e => e.ProvinceId) .HasColumnName("ProvinceID") .HasColumnType("numeric(18, 0)") .HasDefaultValueSql("((0))"); entity.Property(e => e.District).HasMaxLength(50); entity.Property(e => e.Room).HasMaxLength(5); entity.Property(e => e.Street1).HasMaxLength(255); entity.Property(e => e.Street2).HasMaxLength(255); entity.Property(e => e.ZipCode).HasMaxLength(20); entity.HasOne(d => d.Customer) .WithMany(p => p.Addresses) .HasForeignKey(d => d.CustomerId) .HasConstraintName("FK_Addresses_Customers"); }); modelBuilder.Entity<City>(entity => { entity.Property(e => e.CityId) .HasColumnName("CityID") .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.Description).HasMaxLength(100); entity.Property(e => e.ProvinceCode).HasMaxLength(2); entity.Property(e => e.ZipCode).HasMaxLength(5); }); modelBuilder.Entity<Customers>(entity => { entity.HasKey(e => e.CustomerId); entity.Property(e => e.CustomerId) .HasColumnName("CustomerID") .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.BillingAddressId) .HasColumnName("BillingAddressID") .HasColumnType("numeric(18, 0)"); entity.Property(e => e.CompanyName).HasMaxLength(255); entity.Property(e => e.CustomerUi) .HasColumnName("CustomerUI") .HasDefaultValueSql("(newid())"); entity.Property(e => e.Fed) .HasColumnName("FED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Feip) .HasColumnName("FEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Feu) .HasColumnName("FEU") .HasMaxLength(50); entity.Property(e => e.FiscalCode).HasMaxLength(50); entity.Property(e => e.Idwfstate).HasColumnName("IDWFState"); entity.Property(e => e.Led) .HasColumnName("LED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Leip) .HasColumnName("LEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Leu) .HasColumnName("LEU") .HasMaxLength(50); entity.Property(e => e.Name).HasMaxLength(255); entity.Property(e => e.ShippingAddressId) .HasColumnName("ShippingAddressID") .HasColumnType("numeric(18, 0)"); entity.Property(e => e.Surname).HasMaxLength(255); }); modelBuilder.Entity<DeviceSetup>(entity => { entity.Property(e => e.DeviceSetupId) .HasColumnName("DeviceSetupID") .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.AddressId) .HasColumnName("AddressID") .HasColumnType("numeric(18, 0)"); entity.Property(e => e.DeliveryPointUi) .HasColumnName("DeliveryPointUI") .HasDefaultValueSql("(newid())"); entity.Property(e => e.DeviceId) .HasColumnName("DeviceID") .HasColumnType("numeric(18, 0)"); entity.Property(e => e.Fed) .HasColumnName("FED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Feip) .HasColumnName("FEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Feu) .HasColumnName("FEU") .HasMaxLength(50); entity.Property(e => e.Idwfstate).HasColumnName("IDWFState"); entity.Property(e => e.Led) .HasColumnName("LED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Leip) .HasColumnName("LEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Leu) .HasColumnName("LEU") .HasMaxLength(50); entity.Property(e => e.UserGivenName).HasMaxLength(255); entity.Property(e => e.ValidFrom).HasColumnType("datetime"); entity.Property(e => e.ValidTo).HasColumnType("datetime"); entity.HasOne(d => d.Address) .WithMany(p => p.DeviceSetup) .HasForeignKey(d => d.AddressId) .OnDelete(DeleteBehavior.ClientSetNull) .HasConstraintName("FK_DeviceSetup_Addresses"); entity.HasOne(d => d.Device) .WithMany(p => p.DeviceSetup) .HasForeignKey(d => d.DeviceId) .HasConstraintName("FK_DeviceSetup_Devices"); }); modelBuilder.Entity<Devices>(entity => { entity.HasKey(e => e.DeviceId); entity.HasIndex(e => e.SerialNo) .IsUnique(); entity.Property(e => e.DeviceId) .HasColumnName("DeviceID") .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.ChiaviDiAzure).HasMaxLength(10); entity.Property(e => e.DeviceBatch) .HasMaxLength(50) .IsUnicode(false); entity.Property(e => e.DeviceMtype) .HasColumnName("DeviceMType") .HasMaxLength(10); entity.Property(e => e.DeviceUi) .HasColumnName("DeviceUI") .HasDefaultValueSql("(newid())"); entity.Property(e => e.Fed) .HasColumnName("FED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Feip) .HasColumnName("FEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Feu) .HasColumnName("FEU") .HasMaxLength(50); entity.Property(e => e.Idwfstate).HasColumnName("IDWFState"); entity.Property(e => e.Led) .HasColumnName("LED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Leip) .HasColumnName("LEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Leu) .HasColumnName("LEU") .HasMaxLength(50); entity.Property(e => e.ModelId) .HasColumnName("ModelID") .HasColumnType("numeric(18, 0)"); entity.Property(e => e.SelfDeviceId) .HasColumnName("SelfDeviceID") .HasColumnType("numeric(18, 0)"); entity.Property(e => e.SerialNo).HasMaxLength(100); entity.HasOne(d => d.IdwfstateNavigation) .WithMany(p => p.Devices) .HasForeignKey(d => d.Idwfstate) .HasConstraintName("FK_Devices_WFStates"); }); modelBuilder.Entity<Districts>(entity => { entity.HasKey(e => e.DistrictId) .HasName("PK_Districts_1"); entity.Property(e => e.DistrictId) .HasColumnName("DistrictID") .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.Description).HasMaxLength(255); entity.Property(e => e.NationId) .HasColumnName("NationID") .HasColumnType("numeric(18, 0)"); entity.HasOne(d => d.Nation) .WithMany(p => p.Districts) .HasForeignKey(d => d.NationId) .OnDelete(DeleteBehavior.ClientSetNull) .HasConstraintName("FK_Districts_Nations"); }); modelBuilder.Entity<LanguageRes>(entity => { entity.HasKey(e => e.ResId); entity.Property(e => e.ResId) .HasColumnName("ResID") .HasMaxLength(50) .ValueGeneratedNever(); entity.Property(e => e.Description).IsUnicode(false); entity.Property(e => e.Isolanguage) .HasColumnName("ISOLanguage") .HasMaxLength(3) .IsUnicode(false); }); modelBuilder.Entity<Nations>(entity => { entity.HasKey(e => e.NationId); entity.Property(e => e.NationId) .HasColumnName("NationID") .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.Description).HasMaxLength(255); entity.Property(e => e.IsoCode2).HasMaxLength(2); entity.Property(e => e.IsoCode3).HasMaxLength(3); }); modelBuilder.Entity<Partners>(entity => { entity.HasKey(e => e.PartnerId); entity.Property(e => e.PartnerId) .HasColumnName("PartnerID") .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.ActiveFrom).HasColumnType("date"); entity.Property(e => e.ActiveTo).HasColumnType("date"); entity.Property(e => e.Description).HasMaxLength(255); entity.Property(e => e.FiscalCode).HasMaxLength(50); entity.Property(e => e.Nation).HasMaxLength(5); entity.Property(e => e.PartnerUi).HasColumnName("PartnerUI"); }); modelBuilder.Entity<Products>(entity => { entity.HasKey(e => e.ProductId); entity.Property(e => e.ProductId) .HasColumnName("ProductID") .HasColumnType("numeric(18, 0)"); entity.Property(e => e.Crmpk) .HasColumnName("CRMPK") .HasMaxLength(50) .IsUnicode(false); entity.Property(e => e.Ecspk) .HasColumnName("ECSPK") .HasMaxLength(50) .IsUnicode(false); entity.Property(e => e.Erppk) .HasColumnName("ERPPK") .HasMaxLength(50) .IsUnicode(false); entity.Property(e => e.Idwfstate).HasColumnName("IDWFState"); entity.Property(e => e.Idwftemplate).HasColumnName("IDWFTemplate"); entity.Property(e => e.Name).HasMaxLength(100); entity.Property(e => e.Ot1pk) .HasColumnName("OT1PK") .HasMaxLength(50) .IsUnicode(false); entity.Property(e => e.Ot2pk) .HasColumnName("OT2PK") .HasMaxLength(50) .IsUnicode(false); entity.Property(e => e.ProductUi) .HasColumnName("ProductUI") .HasDefaultValueSql("(newid())"); entity.Property(e => e.Sku) .HasColumnName("SKU") .HasMaxLength(10); entity.Property(e => e.ValidFrom).HasColumnType("datetime"); entity.Property(e => e.ValidTo).HasColumnType("datetime"); entity.HasOne(d => d.IdwfstateNavigation) .WithMany(p => p.Products) .HasForeignKey(d => d.Idwfstate) .HasConstraintName("FK_Products_WFStates"); }); modelBuilder.Entity<Users>(entity => { entity.HasKey(e => e.UserId); entity.HasIndex(e => e.UserUid) .IsUnique(); entity.Property(e => e.UserId) .HasColumnName("UserID") .HasColumnType("numeric(18, 0)") .ValueGeneratedOnAdd(); entity.Property(e => e.CellPhone).HasMaxLength(12); entity.Property(e => e.CustomerId) .HasColumnName("CustomerID") .HasColumnType("numeric(18, 0)"); entity.Property(e => e.Email) .HasColumnName("EMail") .HasMaxLength(100); entity.Property(e => e.AlexaAccessToken) .HasColumnName("AlexaAccessToken") .HasMaxLength(500); entity.Property(e => e.Fed) .HasColumnName("FED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Feip) .HasColumnName("FEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Feu) .HasColumnName("FEU") .HasMaxLength(50); entity.Property(e => e.Isolanguage) .HasColumnName("ISOLanguage") .HasMaxLength(10); entity.Property(e => e.Led) .HasColumnName("LED") .HasColumnType("datetime") .HasDefaultValueSql("(getdate())"); entity.Property(e => e.Leip) .HasColumnName("LEIP") .HasMaxLength(40) .IsUnicode(false); entity.Property(e => e.Leu) .HasColumnName("LEU") .HasMaxLength(50); entity.Property(e => e.Password).HasMaxLength(500); entity.Property(e => e.Salutation) .HasMaxLength(10) .IsUnicode(false); entity.Property(e => e.StateIdwf).HasColumnName("StateIDWF"); entity.Property(e => e.UserType).HasMaxLength(1); entity.Property(e => e.UserUi) .HasColumnName("UserUI") .HasDefaultValueSql("(newid())"); entity.Property(e => e.UserUid) .IsRequired() .HasColumnName("UserUID") .HasMaxLength(50); entity.HasOne(d => d.Customer) .WithMany(p => p.Users) .HasForeignKey(d => d.CustomerId) .HasConstraintName("FK_Users_Customers"); }); } }之前向HTML添加了<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>：

popup.js

$(() => {
    $('button.cooldown').click(function(){
    var btn = $(this);
    btn.prop('disabled', true);
    setTimeout(function(){
      btn.prop('disabled', false);
    },15000);
  })
});

body {
  background-image: linear-gradient( 72.5deg,  rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
  width: 250px;
  height: 400px;
}

#header {
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  background-color: #393e46;
  color: white;
  font-size: 15px;
  border-radius: 10px;
}




.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}

.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}

.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}

.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}




/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  font-size: 18px;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

  input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=file], select {
padding-left: 15%;
}

.form-item {
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
}

.wallpaper-title {
    display: block;
    padding-bottom: 3px;
    font-size: 11px;
}












button.cooldown {
  background: #336699;
  min-height: 48px;
  min-width: 144px;
  position: relative;
  margin: 5px;
  border-radius: 5px;
  border: 0;
  color: #fff;
  padding: 0 15px;
  font-size: 16px;
  outline: none;
  overflow: hidden;
  cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
  outline: none;
}
button.cooldown:disabled {
  background: #264d73;
  color: #d9d9d9;
  cursor: default;
  box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 5px;
  background: #1a334d;
  animation: cooldown 15s linear;
}
@keyframes cooldown {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
/* layout stuff */
section {
  text-align: center;
  margin-top: 100px;
  color: #333;
}
p {
  font-size: 12px;
}

如何修复JS和Jquery不适用于Chrome扩展程序

1 个答案: